CSS Display:Table-Row Does Not Expand When Width Is Set to 100%

CSS display:table-row does not expand when width is set to 100%

If you're using display:table-row etc., then you need proper markup, which includes a containing table. Without it your original question basically provides the equivalent bad markup of:

<tr style="width:100%">
    <td>Type</td>
    <td style="float:right">Name</td>
</tr>

Where's the table in the above? You can't just have a row out of nowhere (tr must be contained in either table, thead, tbody, etc.)

Instead, add an outer element with display:table, put the 100% width on the containing element. The two inside cells will automatically go 50/50 and align the text right on the second cell. Forget floats with table elements. It'll cause so many headaches.

markup:

<div class="view-table">
    <div class="view-row">
        <div class="view-type">Type</div>
        <div class="view-name">Name</div>                
    </div>
</div>

CSS:

.view-table
{
    display:table;
    width:100%;
}
.view-row,
{
    display:table-row;
}
.view-row > div
{
    display: table-cell;
}
.view-name 
{
    text-align:right;
}

CSS table-row not expanding 100% inside table-cell

Remove display:table-row to make the bottom border visible

or use:

<div id="topRow">
    This is the top row
</div>
<hr />
<div id="bottomRow">
    This is the bottom row
</div>

Table row not expanding to full width

Remove display: block in .Table-Normal

Fiddle

.Table-Normal {
    position: relative;
    //display: block;
    margin: 10px auto;
    padding: 0;
    width: 100%;
    height: auto;
    border-collapse: collapse;
    text-align: center;
}

How to make a table-row take 100% width of its container?

Here we go ... and may I suggest external CSS

.tbl {

  display: table;

}

.tbl .row {

  display: table-row;

}

.tbl .cell {

  display: table-cell;

} 

.tbl .chat {

  width:100px;

  background-color: yellow;

} 

.tbl .user {

  background-color: lightblue;

  width:100%

} 

.tbl .input {

  background-color: red;

  display: table-caption;

  caption-side: bottom;

  width: 100%;

}

<div class="tbl">

  <div class="row">

    <div class="cell chat">Chat</div>

    <div class="cell user">Users</div>

  </div>

  <div class="input">Input</div>

</div>

CSS table cell not filling 100% of the screen width

It might be some problems with width of some parent element of your .row. Inspect all parent elements, I think - you will find the guilty one. Although inspect .column and .row classes in console, maybe there are some other css frameworks that can affect it (the .column and .row names are vary common, uses in Bootstrap etc.). Don't forget to add width: 100%; to your table element.

UPDATED

The main mistake was the .column's direct parent was not .row, but .background-image. Rewrited the code according to right display: table and display: table-cell, the elements should be direct relatives.

* {

  box-sizing: border-box;

}

html {

  height: 100%;

}

body {

  height: 100%;

  margin: 0;

  padding: 0;

}

.xx-row {

  display: block;

  width: 100%;

  height: 100%;

}

.background-image {

  display: table;

  width: 100%;

  height: 100%;

}

.yy-column {

  display: table-cell;

}

.one {

  background: #333;

}

.two {

  background: #000;

}

<div class="xx-row">

    <div class="background-image" style="background-image: url('<?php echo theme('background_image', 'url'); ?>');">

        <div class="yy-column one">

        </div>

        <div class="yy-column two">

        </div>

    </div>  

</div>

Why does not display:block and 100% width work on table rows?

This behavior has to do with how are tables treated on browsers.

The table element is set as display:table. The tr is a display:table-row, and the td is display:table-cell. It works the same if you are creating a div based css table.

On this fiddle: http://jsfiddle.net/rv4v2964/1/, I've created the same basic example, but with divs instead, and added a block element nested to the table, but off any row or cell.

You can notice that it stays limited to the first cell's width. One reason is stated in this article:

...the table and column widths are set by the widths of table and col elements or by the width of the first row of cells...

Meaning that when an element is odd to the table structure, the first cell's width set the value for the entire column. This is actually a table-layout behaviour specified on W3:

http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout

...a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column...

Another article mentions different behaviors on each browser on how to threat elements that are off the table structure. http://snook.ca/archives/html_and_css/getting_your_di

CONCLUSION

Browsers don't like when you create table, and place inside it elements that are not supposed to be there. It is likely to me rendered wrongly. It will take in count the first cell's width as its parameter.

On this specific case, a workaround may be setting the display as display: table-caption; that takes the whole width of the table. Then, setting the property caption-side as bottom, it will stay in the bottom of the table.

See here: http://jsfiddle.net/rv4v2964/2/

Reference: http://www.tagindex.net/css/table/caption_side.html

Why child's width does not expand into parent's width in display: table-cell?

The p with display: table-cell is rendered in an anonymous table-row box, in an anonymous table box (§17.2.1 Anonymous table objects), within the div (which then becomes this anonymous table box's containing block).

A table box doesn't expand to the width of its containing block by default (§17.5.2 Table width algorithms: the 'table-layout' property). This is true of anonymous table boxes, HTML table elements, and any other element with display: table.

---

Related Topics