How to approximate table layout with css when structure is disjointed

Question

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).

Answer 1

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)