所以我尝试使用纯 CSS、从不使用表格换布局的福音，我真的有。但在经历了令人难以置信的痛苦和痛苦之后，我正准备放弃。我愿意付出一些努力在 CSS 中完成一些事情，不要误会我的意思。但是当看起来可以用布局表完成的一些最简单的事情在 CSS 中完全不可能时，我不在乎概念纯度是否真的开始受到打击。
现在，我似乎很生气，而且我很生气；我对自己浪费的时间感到愤怒，我对那些从 QuarkXpress 背景出来的人给我无用的固定宽度设计感到愤怒，我对 CSS 的失败承诺感到愤怒。但我并不是要开始争论。我真的很想知道一个简单问题的答案，这个问题将决定我是再尝试一下纯 CSS 的东西还是把它混为一谈，并在我喜欢的时候使用布局表。因为我不想回到布局表，认为如果实际上不是，这件事是不可能的。
问题是这样的：有没有办法使用纯CSS布局在左边有一个固定宽度的列，在它的右边放置一个数据表，并让数据表整齐地占据其余部分有什么可用空间？也就是说，通过在左侧单元格上设置宽度为 100% 和固定宽度的两单元格布局表可以轻松实现相同的布局？
<div style="width: 200px;background-color: #FFFFCC; float: left;">
Left column
</div>
<div style="margin-left: 200px; background-color: #CCFFFF">
Right column
</div>
应该这样做（显然实现会根据它在页面中的位置而有所不同，但我认为这是您正在寻找的概念）。
这是你要找的吗？
body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontent {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200px;
/*Width of frame div*/
height: 100%;
overflow: hidden;
/*Disable scrollbars. Set to "scroll" to enable*/
background: navy;
color: white;
}
#maincontent {
position: fixed;
top: 0;
left: 200px;
/*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}
.innertube {
margin: 15px;
/*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body {
/*IE6 hack*/
padding: 0 0 0 200px;
/*Set value to (0 0 0 WidthOfFrameDiv)*/
}
* html #maincontent {
/*IE6 hack*/
height: 100%;
width: 100%;
}<div id="framecontent">
<div class="innertube">
<h1>CSS Left Frame Layout</h1>
<h3>Sample text here</h3>
</div>
</div>
<div id="maincontent">
<div class="innertube">
<h1>Dynamic Drive CSS Library</h1>
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a>
</p>
</div>
</div>我感觉到你的痛苦，但尽量不要把它看作是浪费时间。我相信你对 CSS 的理解比以前要好得多。继续使用它，您将开始看到优势。我个人发现 CSS 是需要大量练习才能精通的东西之一。我使用基于 CSS 的布局已经 5 年了，我仍然每天都在学习有趣的技巧。
我想这就是你要找的：
<table style='width: 100%;'>
<tr>
<td style='width: 200px;'></td>
<td></td>
</tr>
</table>
晚点再谢我。=P
（我显然是在开玩笑……有点……）
为了让这个问题保持最新，这里有 5 种方法可以让你同时使用 CSS2 和 CSS3 来实现相同的目标。
这就是它多年来的做法：简单而有效。
#example1 .fixedColumn {
width: 180px;
float: left;
background: #FCC;
padding: 10px;
}
#example1 .flexibleColumn {
margin-left: 200px;
background: #CFF;
padding: 10px;
}<div id="example1">
<div class="fixedColumn">
Fixed Column
</div>
<div class="flexibleColumn">
Flexible Column
</div>
</div>calc()从 IE9 向上工作，尽管对某些版本的 android 浏览器的支持有点不稳定：http: //caniuse.com/#feat=calc
#example2.calc {
overflow: hidden;
}
#example2.calc .fixedColumn {
width: 180px;
float: left;
background: #FCC;
padding: 10px;
}
#example2.calc .flexibleColumn {
width: calc(100% - 220px); /*200px for the fixed column and 20 for the left and right padding */
float: left;
background: #CFF;
padding: 10px;
}<div id="example2" class="calc">
<div class="fixedColumn">
Fixed Column
</div>
<div class="flexibleColumn">
Flexible Column
</div>
</div>#example3.table {
display: table;
width: 100%;
}
#example3.table .fixedColumn {
width: 180px;
display: table-cell;
background: #FCC;
padding: 10px;
}
#example3.table .flexibleColumn {
display: table-cell;
background: #CFF;
padding: 10px;
}<div id="example3" class="table">
<div class="fixedColumn">
Fixed Column
</div>
<div class="flexibleColumn">
Flexible Column
</div>
</div>Flexbox 对跨浏览器的支持出奇的好：http: //caniuse.com/#search=flex
#example4.flex {
display: flex;
}
#example4.flex .fixedColumn {
width: 180px;
background: #FCC;
padding: 10px;
}
#example4.flex .flexibleColumn {
flex: 1 100%;
flex-basis: auto;
background: #CFF;
padding: 10px;
}<div id="example4" class="flex">
<div class="fixedColumn">
Fixed Column
</div>
<div class="flexibleColumn">
Flexible Column
</div>
</div>CSS Grid 使 CSS 中的复杂布局变得非常直观和简单。
http://caniuse.com/#search=grid
#example5.grid {
display: grid;
grid-template-columns: 200px 1fr;
}
#example5.grid .fixedColumn {
grid-column: 1;
background: #FCC;
padding: 10px;
}
#example5.grid .flexibleColumn {
grid-column: 2;
background: #CFF;
padding: 10px;
}<div id="example5" class="grid">
<div class="fixedColumn">
Fixed Column
</div>
<div class="flexibleColumn">
Flexible Column
</div>
</div>这是一个包含所有 5 种技术的代码笔：
首先，我推荐 Eric Meyer 的 CSS 书籍以及网络上的CSS 参考：A List Apart。我在工作中广泛使用 CSS，我认为我已经做得很好了。
说了这么多：做有效的事。我经历的正是你刚刚经历的痛苦。最后，我认为仅仅为了能够说我没有使用过桌子而妥协我的设计是不值得的。
请记住：你不是为编写 CSS 而获得报酬的——你是为编写工作软件而获得报酬的。
像这样的东西：
<div style="position: relative; width: 100%">
<div style="position: absolute; left: 0; top: 0; width: 200px">
left column
</div>
<div style="position: absolute; left: 200px; top: 0">
other stuff
</div>
</div>
当然，您可能应该将样式放在单独的样式表中，而不是内联。左侧的单个固定宽度列相当简单，但偶尔我确实看到其他布局可以使用表格轻松完成，但据我所知，使用 CSS 非常困难。
你可能想试试这些：
http://www.alistapart.com/stories/practicalcss/
http://www.w3.org/2002/03/csslayout-howto
原因如下：
http://en.wikipedia.org/wiki/Tableless_web_design
http://davespicks.com/essays/notables.html
更多操作指南：
div.row {
clear: both;
padding-top: 10px;
}
div.row span.label {
float: left;
width: 100px;
text-align: right;
}
div.row span.formw {
float: right;
width: 335px;
text-align: left;
}
<div style="width: 350px; background-color: #cc9;
border: 1px dotted #333; padding: 5px;
margin: 0px auto";>
<form>
<div class="row">
<span class="label">Name:</span><span
class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Age:</span><span
class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Shoe size:</span><span
class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Comments:</span><span
class="formw">
<textarea cols="25" rows="8">
Go ahead - write something...
</textarea>
</span>
</div>
<div class="spacer">
</div>
</form>
</div>
我喜欢 CSS 仍然需要一整页代码来复制几行使用表格的方式。
在与 CSS 大战之后，我得出结论，“纯粹”在旁观者眼中，并且已经转向更多“让我们只使用有效的方法”的方法。
将 CSS 用于它的好处：让事物看起来很漂亮。尽可能使用 DIV 和 SPAN。但是，如果您发现自己花了一天的时间试图让所有不同的浏览器风格都对齐，那么就在那儿拍一张桌子然后继续前进。别担心，与大多数人的想法相反，小狗实际上不会死。
几乎可以肯定有一个答案涉及将 display:table 和 display:table-cell 应用于相关元素。也就是说……不。