Html 镀铬工作台可在包裹时延伸
我有一个表，我将固定的“name”列宽设置为200px 当任何一行中的文本换行到下一行（形成一个2行单元格）时，每隔一列将被扩展。有关可复制的代码段，请参见以下内容：Html 镀铬工作台可在包裹时延伸,html,css,google-chrome,Html,Css,Google Chrome,我有一个表，我将固定的“name”列宽设置为200px 当任何一行中的文本换行到下一行（形成一个2行单元格）时，每隔一列将被扩展。有关可复制的代码段，请参见以下内容： <!DOCTYPE html> <html> <head> <style> table { border-collapse:collapse; } table, td, th { border:1px solid black; } tr:nth-child(even) { b
<!DOCTYPE html>
<html>
<head>
<style>
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
tr:nth-child(even) {
background-color: #ddddff;
}
</style>
</head>
<body>
<table style="position:fixed;background-color:white;top:0;left:100px;">
<tr>
<td width="200px;">
Park Name
</td>
<td>
Park Viewed
</td>
<td>
Book Now Button
</td>
<td>
Website Button
</td>
<td>
Call Button
</td>
<td>
Email Button
</td>
<td>
Book Now Call Button
</td>
</tr>
</table>
<table style="margin-left:100px;margin-top:20px">
<tr>
<td width="200px;">
Park Name
</td>
<td>
Park Viewed
</td>
<td>
Book Now Button
</td>
<td>
Website Button
</td>
<td>
Call Button
</td>
<td>
Email Button
</td>
<td>
Book Now Call Button
</td>
</tr>
<tr>
<td>
Camp Hatteras RV Resort and Campground
</td>
<td>
1
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</body>
</html>
桌子
{
边界塌陷：塌陷；
}
表，td，th
{
边框：1px纯黑；
}
tr:n个孩子（偶数）{
背景色：#ddff；
}
公园名称
公园景观
立即预订按钮
网站按钮
呼叫按钮
电子邮件按钮
立即预订呼叫按钮
公园名称
公园景观
立即预订按钮
网站按钮
呼叫按钮
电子邮件按钮
立即预订呼叫按钮
哈特拉斯露营房车度假村和露营地
1.
编辑：将CSS移到代码段中，这样它就不会来自外部源代码。将标题放在thead中，而不是diff表中
<table>
<thead>
<tr>
<th class="name">col1</th>
<th>col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>data col1</td>
<td>data col2</td>
</tr>
</tbody>
</table>
th.name {width: 200px}