How to Create a Table Layout with Float in CSS

how to create a table layout with float in css

I would get rid of the spans and give the first second and third divs a class of "content" and then in your css put: .content { float: left; }.

CSS UL as table with float left

You are using a cricket bat to play baseball

Use table for tabular layouts

Change your markup, use table, tr, td and not ul, ul are meant for listing items.

---

If anyways you want to use ul and li for creating a table layout, than you should use display: table; and display: table-cell; which changes the display of the elements, but still, you shouldn't do that, you will find hard to use display: table-row; and such properties as only li can be nested as a direct child to ul element.

Table layout and float left and bootstrap grid

If flexbox is an option, you can make your row a wrapping flexbox - see demo below:

.architect-table {

  width: 100%;

}

.row {

  display: flex;

  flex-wrap: wrap;

}

.architect-table > .row > .cell {

  min-height: 44px;

  border: 1px solid black;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<div class="container">

  <div class="architect-table">

    <div class="row">

      <div class="cell column-1 col-xs-12 col-sm-6">abcde</div>

      <div class="cell column-2 col-xs-12 col-sm-6">abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde

        abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde</div>

    </div>

  </div>

</div>

Any way to get tr to float for a responsive table layout?

you need to reset <tr> display as well.

table{

    width:100%;

    table-layout:fixed;

    max-width:500px;

}

tr {

    display:inline;

    font-size:0;/* kind of erase white-space */

}

td{

    width:50%;

    display:inline-block;

    margin:0;

    padding:0;

    font-size:1rem/* reset font-size*/;

      /* show me*/ box-shadow: 0 0 0 1px;

}

<table>

    <tr>

        <td>1</td>

        <td>2</td>

        <td>3</td>

    </tr>

    <tr>

        <td>4</td>

        <td>5</td>

        <td>6</td>

    </tr>

</table>

In CSS, why does the combination of float: left; display:table; margin: x on multiple elements make the margins decrease?

This should not happen. Horizontal margins on block-level tables should be calculated in the same way as with any other block-level non-replaced elements, as described in section 10.3.3 of the CSS2.1 spec, regardless of which table layout algorithm is used. In particular, percentages values for margins should be calculated based on the width of the containing block of the element that you're displaying as a table; since all your elements are siblings that share the same parent and the same margin percentage value, they should be equidistant as long as they are floating block boxes.

In all browsers except Google Chrome, the elements are equidistant, as expected. So my best guess is that this is another Chrome bug.

If you comment out the display: table declaration — which as you say causes the behavior to return to normal — browsers will still generate anonymous block table boxes within your floats to contain the table cells. This should not adversely affect the layout, but if it does, I can't comment further as I'm not intimately familiar with how table layout works in terms of CSS.

Float inside div with table-row

Your <div> that's floated to the right doesn't have height. Firefox seems to understand the 100% height even when the contents of the <div> are empty but IE9, for example, doesn't.

One alternative approach would be to give your <div> that contains the text 60px padding-left and 60px padding-right, and then apply background images to it (note: multiple background images will only work in CSS3-friendly browsers). The padding essentially creates empty space for the your background images and always has the same height as the text.

A further, slightly more convoluted approach, would be to divide the inside area into three (left, middle, right) and setting display: table-cell (or using a table), and then essentially allowing the height of the left and right cells to adjust according to the height of middle cell which contains the text. This would reveal the background images on the sides according to the height of the middle text --- standard table behaviour. This would get rid of the need for floats. display: table-cell is not supported in IE6/IE7, but a normal HTML table would work fine.

float: right in inline css of td

You can do that by using the default table layout mode and expanding the second table cell.

Because the table layout mode is set to auto, even if we expand one cell to the width of the table, the layout will expand that cell to take as much space as possible.

table {

  width: 100%; /* <-- only this is necassery for this effect */

  padding: 0.5em;

  background: lightgrey;

}

.expand {

  width: 100%;

}

<table>

  <tr>

    <td>Name:-</td>

    <td class="expand"><strong>XYZ</strong></td>

    <td>Age:-</td>

    <td><strong>38</strong></td>

  </tr>

</table>

Floated Divs instead of a table to achieve layout

Check out this example I've made for you:
http://jsfiddle.net/ADQ8g/

html:

<div class="table-wrapper">
    <div class="row row1">
        <div class="column">
            content goes here
        </div>
        <div class="column">
            content goes here
        </div>
        <div class="column">
            content goes here
        </div>
    </div>
    <div class="row row2">
        <div class="column">
            content goes here
        </div>
        <div class="column">
            content goes here
        </div>
    </div>
</div>

CSS:

.row:after {
    display: block;
    clear: both;
    content: "";
}

.row1 {
    background-color: red;
}
.row2 {
    background-color: green;
}
.row1 .column {
    width: 33.3333%;
}

.row2 .column {
    width: 50%;
}

.column {
    float: left;
    text-align: center;
}

Explanation:
Each floating element needs to have a width set (since you're floating block elements which by default takes up 100% of it's container's width) in a way that allows several elements next to each other (50% for two elements, 33% for 3 elements, 25% for 4 elements and so on... you could also give specific sizes with pixels).

After you have done floating a "row" or elements, you need to clear the float with clear:both. I've used the :after pseudo element to save myself from creating an extra element with just the clear rule.

If you have more questions, feel free to ask :)

---

Related Topics