CSS Table-Like Style

CSS Table-Like alignment using no tables? (CSS RelativeLayout)

It is possible to display elements as tables that aren't semantically tables, only using CSS. Using the display property, you can imitate tables while you have divs in your markup. Check this article.

Depending on what you want to achieve, there are some alternative options. If you only want the two rows in each column stick to the width of the column, you should try putting the rows inside the column tag instead of doing the opposite. This is working without predefined dimensions.

Also, if the heights are set the same for each cell in a row you could simply float them to left, and set container width to the sum of row width. This only works with predefined dimensions.

CSS

div.c
{
    width: 100%;
}

div.c>div:nth-child(2n-1)
{
    width: 25%;
    float: left;
    background: blue;
}

div.c>div:nth-child(2n)
{
    width: 75%;
    float: left;
    background: yellow;
}

Here is a fiddle: http://jsfiddle.net/kdani3/DbRuV/

A more complex example: http://jsfiddle.net/kdani3/DbRuV/1/

I think it's really simple, even simpler than using a table layout.

Also, I really recommend you to take a look at CSS grid frameworks, like Twitter Bootstrap. That's definitely worth a look.

How to style a table-like div with css? How to fill a column?

What you want to do is not possible with the default Bootstrap grid system. Each .col-*-* will take only the height it needs, since it is floated.

If possible, I would use a table styling to achieve what you want. Since what you are doing is a table, why not simply use the Bootstrap table styling?

Using <table>

http://jsfiddle.net/spjm90cf/1/

The HTML:

<table class="table event-table">
    <tr>
       <td class="event-date-container">
           <p class="event-date">OCT 4</p>
       </td>
       <td>
           <p class="color-text-green">ALL CAMPUSES</p>
           <p>Ada dua ekor serigala di hutan</p>
       </td>
    </tr>
    <tr>
       <td class="event-date-container">
           <p class="event-date">OCT 18</p>
       </td>
       <td>
           <p class="color-text-green">ALL CAMPUSES</p>
           <p>Ada dua ekor serigala di hutan belantara, serigala B menantang serigala A</p>
       </td>
    </tr>
</table>

The CSS:

/* Remove Bootstrap's dividing lines */
.event-table > tbody > tr > td {
    border-width: 0;
}

.event-date {
    text-align: center;
    font-family: fantasy;
    color: #222222;
}
.event-date-container {
    padding: 5px;
    background-color: gray;
}

Manipulating the grid system

http://jsfiddle.net/spjm90cf/2/

If you cannot use a table for some reason, here is a way of styling your .rows and .col-*-*s into a table-like structure:

The HTML (you will need a container to act as the "table"):

<div class="container-table">
    <div class="row">
       <div class="col-xs-2 event-date-container">
           <p class="event-date">OCT 4</p>
       </div>
       <div class="col-xs-10">
           <p class="color-text-green">ALL CAMPUSES</p>
           <p>Ada dua ekor serigala di hutan</p>
       </div>
    </div>
    <div class="row">
       <div class="col-xs-2 event-date-container">
           <p class="event-date">OCT 18</p>
       </div>
       <div class="col-xs-10">
           <p class="color-text-green">ALL CAMPUSES</p>
           <p>Ada dua ekor serigala di hutan belantara, serigala B menantang serigala A</p>
       </div>
    </div>
</div>

The CSS:

.container-table {
    display: table; 
    width: 100%;
}

.container-table .row {
    display: table-row;
}

.container-table [class^="col-"] {
    display: table-cell;
    float: none;
}

.event-date {
    text-align: center;
    font-family: fantasy;
    color: #222222;
}
.event-date-container {
    padding: 5px;
    background-color: gray;
}

How to make a simple HTML table to look like Handsontable

This codepen should get you started:
http://codepen.io/anon/pen/lHcsD

I have just taken the css from their demo here:
http://jsfiddle.net/qxqbP/

And added some styling for input fields:

input {
  border:none;
  width:100%;
  height:100%;
  font-family: Verdana, Helvetica, Arial, FreeSans, sans-serif;
  font-size:12px;
  padding: 0 4px 0 4px;
}

input:focus { 
  border:2px solid #5292F7;
  outline: none;
}

You will need to pick through the Handsontable CSS to see what is relevant.

Styling CSS tables where display: table-row is used

Unless the borders are collapsed, table rows don't have borders, they just hold the table cells (which can have borders) in place.

Set border-collapse: collapse.

section {  border-collapse: collapse;}
.table_row_line {  border: 2px solid darkgrey;  width: 100%;  height: 100%;  padding: 5px;}

<section style="display: table;">  <header class="table_row_line" style="display: table-row;">    <div style="display: table-cell;">1</div>    <div style="display: table-cell;">2</div>    <div style="display: table-cell;">3</div>  </header>  <div style="display: table-row;">    <div style="display: table-cell;">4</div>    <div style="display: table-cell;">5</div>    <div style="display: table-cell;">6</div>  </div></section>

HTML: how to make 2 tables with different CSS

In your html

<table class="table1">
<tr>
<td>
...
</table>

<table class="table2">

<tr>
<td>
...
</table>

In your css:

table.table1 {...}
table.table1 tr {...}
table.table1 td {...}

table.table2 {...}
table.table2 tr {...}
table.table2 td {...}

Style div display table-row can be styled or not

Answer is yes to both of your questions, in fact there is lot more you can do with display:table using CSS styling

CSS has properties to make any element you wish behave as if it was a table element. You'll need to structure them essentially as you would a table, and it will be subject to the same source-order-dependency as a table, but you can do it. I'm not crapping on it either, it's genuinely useful sometimes. If that layout style solves a problem and has no negative order implications, use it.

Don't use inline styles, but just for understanding here's how that would go:

<section style="display: table;">
  <header style="display: table-row;">
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
  </header>
  <div style="display: table-row;">
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
  </div>
</section>

CSS

display: table                /* <table>     */
display: table-cell           /* <td>        */
display: table-row            /* <tr>        */
display: table-column         /* <col>       */
display: table-column-group   /* <colgroup>  */
display: table-footer-group   /* <tfoot>     */
display: table-header-group   /* <thead>     */

How (and why) to use display: table-cell (CSS)

After days trying to find the answer, I finally found

display: table;

There was surprisingly very little information available online about how to actually getting it to work, even here, so on to the "How":

To use this fantastic piece of code, you need to think back to when tables were the only real way to structure HTML, namely the syntax. To get a table with 2 rows and 3 columns, you'd have to do the following:

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Similarly to get CSS to do it, you'd use the following:

HTML

<div id="table">
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
        <div class="td"></div>
    </div>
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
        <div class="td"></div>
    </div>
</div>

CSS

#table{ 
    display: table; 
}
.tr{ 
    display: table-row; 
}
.td{ 
    display: table-cell; }

As you can see in the example below, the divs in the 3rd column have no content, yet are respecting the auto height set by the text in the first 2 columns. WIN!

#table {
    display: table;
    padding: 5px;
}
.tr {
    display: table-row;
    padding: 5px;
}
.td {
    display: table-cell;
    padding: 5px;
    width: 150px;
    border: #000000 solid 1px;
    margin: 5px;
}

<div id="table">
    <div class="tr">
        <div class="td">Row 1,
            <br />Column 1</div>
        <div class="td">Row 1, Column 2</div>
        <div class="td" style="background:#888888;"></div>
    </div>
    <div class="tr">
        <div class="td">Row 2,
            <br />Column 1</div>
        <div class="td">Row 2, Column 2</div>
        <div class="td" style="background:#888888;"></div>
    </div>
</div>

How to style my unordered list like a table?

Well, here's one possible solution:

ul {
    width: 450px;           /* change it to whatever you like */
    position: relative;

    /* these should be probably already set up by `reset.css` */ 
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul:before, ul:after {
    text-align: center;
    display: block;
    border: 1px solid black;
    border-bottom: 0;
    width: 48%;
}

ul:before {
    content: 'col1';
    border-right: 0;    
}

ul:after {
    content: 'col2';
    position: absolute;
    top: 0;
    left: 48%;
    margin-left: 1px;    
}

li {
    text-align: right;
    width: 48%;
    float: left;
    border: 1px solid black;
    margin-bottom: -1px;
}

li:nth-child(even) {
    margin-left: -1px;
}

It works (JSFiddle; tested in Chrome, Firefox and Opera; nth-child(even) selector obviously fails in IE8, so you have to emulate it with class or other means; but otherwise it's still solid), but I admit I feel guilty about this. )

P.S. If you want to add padding to the "cell" contents, don't forget to change their widths as well, like here:

li {
    width: 47%;
    padding-right: 1%;
}

---

Related Topics