如何使表格行占用其容器100％？

Question

这是fiddle

这是我的代码

#container {
  display: table;
  width: 600px;
}
.yellow {
  display: table-cell;
  width: 200px;
  background-color: yellow;
}
.blue {
  display: table-cell;
  background-color: blue;
}
.row {
  display: table-row;
}
.red {
  background-color: red;
  width: 100%;
}

<div id="container">
  <div class="row">
    <div class="yellow">Chat</div>
    <div class="blue">Users</div>
  </div>
  <div class="row red">Input</div>
</div>

在发帖之前，我读了这篇question，但这对我没有帮助。

如何制作row red的{​​{1}} 100％？

Answer 1

我们开始......我可以建议使用外部CSS

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

检查下面的工作代码。

#container {
  display:table;
  width:600px;
}
.yellow{
  display:table-cell;
  width:200px;
  background-color:yellow;
}
.blue {
  display:table-cell;
  background-color:blue;
 }
.row {
    display:table-row; 
}  
.red {
  background-color:red;
  width:600px;
  position:absolute;
}

    <div id="container">
    	<div class="row">
        	  <div class="yellow">Chat</div>
            <div class="blue">Users</div>
        </div>
        <div class="row red">Input</div>
    </div>

Answer 3

根据您需要使用display:table的要求，最简单的方法是：

• 使用table-layout:fixed和display:table-caption使用caption-side:bottom（正如@LGSon在我写答案时首先指出的那样。）

body {
  margin: 0
}
#container {
  display: table;
  width: 600px;
  table-layout: fixed
}
.row {
  display: table-row;
}
.yellow {
  display: table-cell;
  width: 200px;
  background-color: yellow;
}
.blue {
  display: table-cell;
  background-color: blue;
}
.red {
  background-color: red;
  width: 600px;
  display: table-caption;
  caption-side: bottom
}

<div id="container">
  <div class="row">
    <div class="yellow">Chat</div>
    <div class="blue">Users</div>
  </div>
  <div class="row red">Input</div>
</div>

• 或将其更改为table标记HTML

body {
  margin: 0
}
#container {
  width: 600px;
  table-layout: fixed;
  border-collapse:collapse
}
.yellow {
  width: 200px;
  background-color: yellow;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
  width: 100%;
}

<table id="container">
  <tr class="row">
    <td class="yellow">Chat</td>
    <td class="blue">Users</td>
  </tr>
  <tr class="row">
    <td colspan="2" class="red">Input</td>
  </tr>
</table>

Answer 4

请在下面添加css

.row {
  float: left;
  width: 100%;
} 
.yellow {
 background-color: yellow;
 float: left;
 width: 30%;
 }
.blue {
 background-color: blue;
 float: left;
 width: 70%;
}
.red {
 background-color: red;
 width: 100%;
 }

Answer 5

不要使用display：table-cell等。

我给出了另一个解决方案：

https://jsfiddle.net/0cd5wvr2/5/

用这个css：

#container {
  width:600px;
}
.yellow{
  width:30%;
  background-color:yellow;
  float:left;
}
.blue {
  width:70%;
  background-color:blue;
  float:left;
 }
.red {
  background-color:red;
  width:100%;
}

Answer 6

应用此css

#container {
  display:table;
  width:600px;
}

.yellow {
    background-color: yellow;
    float: left;
    width: 30%;
}
.blue {
    background-color: blue;
    display: table-cell;
    float: left;
    width: 70%;
}
.row {
    display: table-row;
    float: left;
    width: 100%;
}
.red {
    background-color: red;
    float: left;
    width: 100%;
}

见小提琴。 https://jsfiddle.net/0cd5wvr2/6/

希望这能帮到你！