html - 在固定宽度跨度旁边显示表格

Question

我有一个 html <table>具有动态宽度(随窗口大小变化)和固定宽度 <span> (500 像素)。

我想将两者并排显示，以便两者都填满父容器的整个宽度

我想只使用 CSS(而不是 js)

我一直在玩弄 CSS，但它似乎破坏了表格的宽度

HTML

<div class='container'>
   <table class='table'>....</table>
   <span class='span'>....</span>
</div>

CSS

.container {
   ......
}

.table {
  .....
}

.span {
   width: 500px;
   display: inline-block; //or block if neccessary
}

Answer 1

您可以尝试使用 table-layout 属性(property).container和 span .

浏览器应该自己创建缺少的元素以生成第一个表格单元格。

DEMO

span {
  display:table-cell;
  width:500px;
  border:solid;
}
table {
  border:solid;
  margin:0;
  width:100%;
}
.container {
  display:table;
  width:100%;
  table-layout:fixed;
}

这应该可以工作

因为 table-layout:fixed

并且因为浏览器应该自己创建缺少的元素(例如 tbody 总是在 <table> 中生成，当缺少或文档中缺少标签如 html 或 body 时)。