Question

我有一个html <table>，它有动态宽度（随窗口大小变化）和固定宽度<span>（500px）。

我希望彼此相邻显示，以便两者都填充父容器的整个宽度

我只想使用CSS（而不是js）

我一直在玩CSS，但似乎破坏了桌子的宽度</ p>

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

您可以尝试使用.container属性span和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

tbody

这应该有效

因为 DEMO

并且因为浏览器应该自己创建缺少的元素（如<table>总是在html丢失时生成，或者在文档中缺少body或{{ 1}}）。

Answer 2

Demo

CSS

body, html {
    margin:0;
    padding:0;
}
.container {
}
table {
    width: calc(100% - 500px);
    border-collapse: collapse;
    float: left;
}
/* Zebra striping */
 tr:nth-of-type(odd) {
    background: #eee;
}
th {
    background: #333;
    color: white;
    font-weight: bold;
}
td, th {
    padding: 6px;
    border: 1px solid #ccc;
    text-align: left;
}
.span {
    display: inline-block;
    width: 500px;
    height: 100px;
    background: red;
}

HTML

<div class='container'>
    <table>
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>etc</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Gaurav</td>
                <td>Singh</td>
                <td>etc</td>
            </tr>
            <tr>
                <td>Gaurav</td>
                <td>Singh</td>
                <td>etc</td>
            </tr>
        </tbody>
    </table> <span class='span'>....</span>

</div>

显示固定宽度范围旁边的表格

2 个答案: