How to approximate table layout with css when structure is disjointed

I have some HTML which I want to use display: table css attributes to control. Unfortunately, I cannot actually change the HTML (or JS either), only the CSS (long story). This is a problem, because the structure of the existing HTML is causing trouble for the table layout. Here is a simplified version of the HTML and CSS:

<style>
    .like-table { display: table;}
    .like-tr { display: table-row;}
    .like-th { display: table-cell; border: 1px solid gray;}
    .useless-div-1 { }
    .useless-div-2 { }
    .like-td { display: table-cell; border: 1px solid gray;}
</style>
<div class="like-table">
    <div class="like-tr">
        <div class="like-th">1</div>
        <div class="like-th">22</div>
        <div class="like-th">3</div>
    </div>
    <div class="useless-div-1"><div class="useless-div-2">
        <div class="like-tr">
            <div class="like-td">111</div>
            <div class="like-td">2</div>
            <div class="like-td">3</div>
        </div>
        <div class="like-tr">
            <div class="like-td">11</div>
            <div class="like-td">2</div>
            <div class="like-td">333</div>
        </div>
    </div></div>
</div>

Sadly, this renders the header and body columns width different widths:

If I remove the "useless-div-*" open and closing tags:

<div class="like-table">
    <div class="like-tr">
        <div class="like-th">1</div>
        <div class="like-th">22</div>
        <div class="like-th">3</div>
    </div>
    <div class="like-tr">
        <div class="like-td">111</div>
        <div class="like-td">2</div>
        <div class="like-td">3</div>
    </div>
    <div class="like-tr">
        <div class="like-td">11</div>
        <div class="like-td">2</div>
        <div class="like-td">333</div>
    </div>
</div>

Then it renders fine, aligning header and body column widths:

So, is there anything I can do to the CSS that will cause the first set of HTML to behave like the second? Remember I cannot modify the HTML or JavaScript -- only the CSS! Please do not ask why...

Click here to tinker with the code.


Since you're wrapping table-row elements by useless-div , you could simply set display property of useless-div to table-row-group :

.useless-div { display: table-row-group; }

In CSS table layouts, all elements should follow the same structural properties.

Here is the JSBin Demo .


Update

After scratching my head for the past 5 hours over this, I realized that it's impossible to handle this by the current way.

So, I decided to write new styles to create a flexible CSS table. But I should mention a few things at first:

  • To keep the columns aligned vertically, setting a specific width to cells is required.
  • In the following example, I set borders to display the table better. because of that, I used box-sizing property to force browser to calculate the width of each cell including its padding and border. If you don't need border , remove it and the border-box property as well.
  • The Approach

    .like-table {
      width: 400px;    /* You could declare a specific width. Your choice */
      margin: 0 auto;
    }
    
    .like-th, .like-td {
      float: left;    /* <--  Float the cells to stick together                    */
      width: 33.33%;  /* <--  I applied the same width on each cell.               */
      /* I've explained how to set specific width for each column in the following */
    
      border: 1px solid gray;          /* Add border around each cell */
    
      -webkit-box-sizing: border-box;  /* Force browser to calculate width+borders */
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    .like-tr:after { /* Clearfix hack */
      content: ' ';
      font: 0/0 a;
      display: block;
      clear: both;
    }
    

    Note: To apply specific width on each column (left + center + right), First set a width on each cell as I did at above, then use the following selectors to override the applied width for left and right columns:

    .like-table .like-td:first-child, /* Selectors for the left column */
    .like-table .like-th:first-child { 
      width: 100px;     /*  <-- Override the width for the left column */
      border-right: 0;  /* You might also want to remove right borders */
    }
    
    .like-table .like-td:last-child,  /* Selectors for the right column */
    .like-table .like-th:last-child {
      width: 100px;      /* <-- Override the width for the right column */
      border-left: 0;    /* You might also want to remove left borders  */
    }
    

    JSBin Demo #1 . (fluid width)

    JSBin Demo #2 . (fixed width)

    链接地址: http://www.djcxy.com/p/88286.html

    上一篇: 如何:100%身高表只滚动tbody

    下一篇: 当结构不连贯时如何用css来近似表格布局