Question

I have replaced a table containing four tables (in a grid) with a div-table containing the four tables as cells. Two things that I absolutely can’t seem to get to work are:

1. How do I get rid of the table border of the div tag using display: table?

2. The bottom left table insists on lining up with the far left edge of the cell and I want it to line up with the far right edge of the cell. Even relative positioning is having no impact on this one.

Here is the CSS:

<style type="text/css">
    .Dashboard {
        display: table;
        border-collapse: collapse;
        border-width: 0px;
    }
    .row1 {
        display:table-row;
    }
    .row2 {
        display:table-row;
        height: 200px;
    }
    .cell1 {
        display: table-cell;
        padding: 2px;
        border: 1px solid black;
    }
    .cell2 {
        display: table-cell;
        padding: 2px;
        border: 1px solid black;
    }
    .cell3 {
        display: table-cell;
        padding: 2px;
        border: 1px solid black;
        text-align: right;
        vertical-align: top;
    }
    .cell4 {
        display: table-cell;
        padding: 2px;
        border: 1px solid black;
    }
    table.inner {
        border-collapse: collapse;
        border: 2px solid black;
        text-align: center;
        padding: 2px;
    }
    td {
        border-collapse: collapse;
        border: 2px solid black;
        text-align: center;
        padding: 2px;
    }
    td.image {
        padding: 0;
        margin: 0;
    }
</style>

And the table layout looks like this:

<div runat="server" id="Dashboard" class="Dashboard">
    <div class="row1">
        <div class="cell1">
            <table class="inner" id="t1">
                <tr>...</tr>
                ...
                <tr>...</tr>
            </table>
        </div>
        <div class="cell2">
            <table class="inner" id="t2">
                <tr>...</tr>
                ...
                <tr>...</tr>
            </table>
        </div>
    </div>
    <div class="row2">
        <div class="cell3">
            <table class="inner" id="t3">
                <tr>...</tr>
                ...
                <tr>...</tr>
            </table>
        </div>
        <div class="cell4">
            <table class="inner" id="t4">
                <tr>...</tr>
                ...
                <tr>...</tr>
            </table>
        </div>
    </div>
</div>

Any advice is appreciated.

Answer 1

To get rid of the border use

border: none;

With the positioning, find the bottom left table id and use

float: right;

But your best option is to get rid of tables anyways. All of this can just as easily be done with straight css.