css - CSS：左侧固定宽度，右侧固定宽度，中间的表格填满剩余空间

Question

标记：

<div>
    <span class="left"></span>
    <table></table>
    <span class="right"></span>
</div>

期望的输出：

|------------------------------------------------------------------------|
|      |                                                          |      |
|.left |                                                          |.right|
|      |                                                          |      |
|      |                       table                              |      |
|      |                    dynamic width                         |      | 
|width |                                                          |width |
| 1em  |                                                          | 1em  |
|      |                                                          |      |
|      |                                                          |      |
|      |                                                          |      |
|      |                                                          |      |
|------------------------------------------------------------------------|

当中心元素是表格时，我在其他答案中看到的解决方案不起作用。

Answer 1

解决方案是display:block;和position。display:block实际上，在这种情况下你应该使用 div ，如果你使用 div我们可以省略

.left{
    position:absolute;
    left:0;
    top:0;
    display:block;
    width:20px;
    border:1px solid black;
}
.right{
    position:absolute;
    right:0;
    top:0;
    display:block;
    width:20px;
    border:1px solid black;
}

div{
    padding-left:20px;
    padding-right:20px;
}

table{
    width:100%;
    border:1px solid black;
}

请检查小提琴

在这里，我显示边框以让您了解宽度

Answer 2

如果要保留标记，可以使用该calc()属性。

您可以向左浮动<span>，并将表格的宽度设置为：

table {border-collapse:collapse; width:calc(100% - 2em); float:left;}

使用此解决方案，表格实际上是 100% 宽度，而不是背景技巧。

这是一个工作的 Fiddle。

我同意评论说使用<span>它是一个坏主意，但是......我认为你有你的理由;）

Answer 3

您可以使用float, 也span用作容器不是一个好主意。而是使用div. 也把你的table里面div：

.container {
  overflow: hidden;
}
.left {
  float: left;
  width: 100px;
  background: yellow;
}
.right {
  float: right;
  width: 100px;
  background: yellow;
}
.main {
  background: orange;
  margin: 0 100px;
}

<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
  <div class="main">
    Hello World
  </div>
</div>