Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>table 的设计模式</h1>
<p>Create with ❤ by <a href="http://yujiangshui.com/">Jiangshui</a>。注意查看 table 和 td 上挂的类。返回文章 <a href="http://yujiangshui.com/about-table/">table 那些事</a>。</p>
<h2>自动收缩适应模式</h2>
<p>设置 width:auto; 和默认的 table-layout: auto; 即可创建根据内容宽度收缩到最小的 table 模式。</p>
<table class="layout-auto width-auto">
	<tbody>
		<tr>
			<td>测试表格</td>
			<td>测试表格</td>
		</tr>
	</tbody>
</table>
<p>如果单元格内容边长,表格和单元格会尽量拉伸增加,来放开单元格内容,以免换行或者缩放。</p>
<table class="layout-auto width-auto">
	<tbody>
		<tr>
			<td>测试表格</td>
			<td>测试试试表格测试试表格测试试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格</td>
		</tr>
	</tbody>
</table>

<h2>固定宽度自动分配模式</h2>
<p>设置 width:400px; (某固定值)和默认的 table-layout: auto; 即可创建 <strong>固定的 table 宽度的</strong> 根据列数和内容长度按照比例计算出来的 table 模式。</p>
<table class="layout-auto width-400">
	<tbody>
		<tr>
			<td>测试表格</td>
			<td>测试表格</td>
		</tr>
	</tbody>
</table>
<p>虽然 table 宽度固定,但是会根据单元格的内容、列数等合理计算分配列宽。</p>
<table class="layout-auto width-400">
	<tbody>
		<tr>
			<td>测试表格</td>
			<td>测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格</td>
		</tr>
	</tbody>
</table>
<table class="layout-auto width-400">
	<tbody>
		<tr>
			<td>测试表格</td>
			<td>测试表格</td>
			<td>测试表格</td>
		</tr>
	</tbody>
</table>
<p>即便是单元格设置了固定宽度,而且总宽度超过了 table 宽度,也不会发生溢出,而是会根据你设置单元格的宽度来按比例计算。</p>
<table class="layout-auto width-800">
	<tbody>
		<tr>
			<td class="width-800">测试表格</td>
			<td class="width-400">测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格</td>
			<td class="width-800">测试表格</td>
		</tr>
	</tbody>
</table>

<h2>拉伸自动适应模式</h2>
<p>设置 width:80%; 和默认的 table-layout: auto; 即可创建根据外框宽度拉伸,内部列按照算法自动计算宽度的模式。</p>
<table class="layout-auto width-100p center">
	<tbody>
		<tr>
			<td>测试表格</td>
			<td>测试表格</td>
		</tr>
	</tbody>
</table>

<h2>固定(fixed)模式</h2>
<p>设置 width:400px;(固定值)和 table-layout: fixed; 即可创建根据表格宽度、列宽度、表格边框宽度、单元格间距计算出来的宽度,与内容无关,不再根据内容长度等进行调整。因此性能也比较好,浏览器不需要重复等待计算渲染。<strong>这样,为 th、td 设置的 width 宽度,不会自动调整。</strong></p>
<table class="layout-fixed width-800">
	<tbody>
		<tr>
			<td class="width-200">测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格</td>
			<td class="width-200">测试表格测试表格测试表格测试表格测试表格测试表格</td>
		</tr>
	</tbody>
</table>

<table class="layout-fixed width-600">
	<tbody>
		<tr>
			<td>测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格</td>
			<td>测试表格测试表格测试表格测试表格测试表格测试表格</td>
		</tr>
	</tbody>
</table>
<table class="layout-fixed width-400">
	<tbody>
		<tr>
			<td>测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格</td>
			<td>测试表格测试表格测试表格测试表格测试表格测试表格</td>
			<td>测试表格测试表格测试表格测试表格测试表格测试表格</td>
			<td>测试表格测试表格测试表格测试表格测试表格测试表格</td>
		</tr>
	</tbody>
</table>
<p>遇到不自动换行(连起来的数字、字母或者设置了 white-space: nowrap; 等)的内容,会直接溢出而不会自动调整。</p>
<table class="layout-fixed width-800">
	<tbody>
		<tr>
			<td style="white-space: nowrap">测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格</td>
			<td class="width-600">测试表格测试表格测试表格测试表格测试表格测试表格</td>
		</tr>
	</tbody>
</table>
              
            
!

CSS

              
                table{
  border-collapse: collapse;
  margin-bottom: 10px;
}
td{
  border: 1px solid #aaa;
}

.layout-auto{
  table-layout: auto;
}
.width-auto{
  width: auto;
}
.width-400{
  width: 400px;
}
.layout-fixed{
  table-layout: fixed;
}
.width-100p{
  width: 80%;
}
.center{
  margin: 0 auto;
}
.width-800{
  width: 800px;
}
.width-600{
  width: 600px;
}
.width-200{
  width: 200px;
}

              
            
!

JS

              
                
              
            
!
999px

Console