我有一张带有固定右侧边栏的桌子。这个右侧边栏现在的宽度为420px。但宽度应始终是内容的宽度。
https://jsfiddle.net/nLdxcedv/10/
我用auto
尝试过,但是固定右侧的设计不再适用了。你有什么想法吗?
以下是代码:
<div id="wrapper">
<div id="content" style="overflow-x:scroll">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
</tr>
</thead>
<tbody>
<tr> <td>Lorem ipsum</td><td>Lorem ipsum </td><td>Lorem ipsum</td><td>Lorem ipsum</td><td>Lorem ipsum<br><td>Lorem ipsum</td><td>Lorem ipsum</td><td>Lorem ipsum </td><td> Lorem ipsum</td><td>Lorem ipsum</td><td>Lorem ipsum</td><td>Lorem ipsum</td><td>Lorem ipsum</td></tr> <tr> <td>Lorem ipsum</td><td>Lorem ipsum </td><td>Lorem ipsum</td><td>Lorem ipsum</td><td><td>Lorem ipsum</td><td>Lorem ipsum</td><td> </td><td> Lorem ipsum</td><td>Lorem ipsum</td><td></td><td></td><td></td></tr>
</tbody>
</table>
</div>
<div id="sidebar">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Lorem ipsum</th>
</tr>
</thread>
<tbody>
<tr><th>Lorem ipsum<tr><th>Lorem ipsum </tbody>
</table>
</div>
<div id="cleared"></div>
和css:
body{padding:40px;}
table{font-size:13px;white-space: nowrap;}
.container{padding:0px}
#content {
float: left;
width: 100%;
}
#sidebar {
float: right;
width: 420px;
margin-right: -420px;
}
#wrapper {
margin-right: 240px;
}
#sidebar {
float: right;
width: 240px;
margin-right: -240px;
}
#cleared {
clear: both;
}
答案 0 :(得分:0)
轻松将固定类名添加到侧栏中的表并添加此css:
.fixed {
table-layout: fixed;
width: auto;
}
<div id="sidebar">
<table class="fixed table table-striped table-bordered">