Html 以百分比表示的单元格宽度和高度的表格_Html_Css_Css Tables

Html 以百分比表示的单元格宽度和高度的表格

html css

Html 以百分比表示的单元格宽度和高度的表格,html,css,css-tables,Html,Css,Css Tables,我需要一个简单的一次性项目，并希望避免所有这些新方法的扩展研究这个我在下面的代码中是否正确使用了CSS 我尝试在第二行中使用不同的单元格宽度无效。必须如何做到这一点才能发挥作用桌子{ 身高：100%；宽度：100%； } tr.row1{ 身高：40%； } tr.row2{ 身高：5%； } tr.row3{ 身高：55%； } td.colS{ 宽度：40%； } 科洛{ 宽度：60%； } 1. 2. 3. 4. 5. 6. 添加表布局：固定加入 table {heig

我需要一个简单的一次性项目，并希望避免所有这些新方法的扩展研究这个

我在下面的代码中是否正确使用了CSS
我尝试在第二行中使用不同的单元格宽度无效。必须如何做到这一点才能发挥作用


桌子{
身高：100%；
宽度：100%；
}
tr.row1{
身高：40%；
}
tr.row2{
身高：5%；
}
tr.row3{
身高：55%；
}
td.colS{
宽度：40%；
}
科洛{
宽度：60%；
}
1.
2.
3.
4.
5.
6.

添加

表布局：固定

加入

table   {height: 100%; width: 100%;}

像这样：

table   {height: 100%; width: 100%; table-layout: fixed;}

表格{高度：100%；宽度：100%；表格布局：固定；}
tr.row1{高度：40%}
tr.row2{高度：5%}
tr.row3{高度：55%}
td.colS{宽度：40%}
td.colW{宽度：60%}


1.
2.
3.
4.
5.
6.

添加

表布局：固定

加入

table   {height: 100%; width: 100%;}

像这样：

table   {height: 100%; width: 100%; table-layout: fixed;}

表格{高度：100%；宽度：100%；表格布局：固定；}
tr.row1{高度：40%}
tr.row2{高度：5%}
tr.row3{高度：55%}
td.colS{宽度：40%}
td.colW{宽度：60%}


1.
2.
3.
4.
5.
6.

您必须为列选择宽度，而不是单个单元格-表格不是这样工作的。例如，如果希望第二列具有宽度，可以使用以下代码

    <html>

<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">

<style>
   table   {height: 100%;width: 100%}
   tr td:nth-child(2) {width:  80%; }
</style>
</head>

<body>


<table>
<tbody>

<tr class="row1">
<td class="colS" style="background-color:red"  >1</td>

<td class="colW" style="background-color:green">2</td>

</tr>

<tr class="row2">
<td class="colW" style="background-color:green">3</td>

<td class="colS" style="background-color:red"  >4</td>

</tr>

<tr class="row3">
<td class="colS" style="background-color:red"  >5</td>

<td class="colW" style="background-color:green">6</td>

</tr>


</tbody>
</table>


</body>

</html>


表{高度：100%；宽度：100%}
tr td:n子（2）{宽度：80%；}
1.
2.
3.
4.
5.
6.

您必须为列选择宽度，而不是单个单元格-表格不是这样工作的。例如，如果希望第二列具有宽度，可以使用以下代码

    <html>

<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">

<style>
   table   {height: 100%;width: 100%}
   tr td:nth-child(2) {width:  80%; }
</style>
</head>

<body>


<table>
<tbody>

<tr class="row1">
<td class="colS" style="background-color:red"  >1</td>

<td class="colW" style="background-color:green">2</td>

</tr>

<tr class="row2">
<td class="colW" style="background-color:green">3</td>

<td class="colS" style="background-color:red"  >4</td>

</tr>

<tr class="row3">
<td class="colS" style="background-color:red"  >5</td>

<td class="colW" style="background-color:green">6</td>

</tr>


</tbody>
</table>


</body>

</html>


表{高度：100%；宽度：100%}
tr td:n子（2）{宽度：80%；}
1.
2.
3.
4.
5.
6.

谢谢！所以在不同的行中没有不同的单元格宽度？我必须为每一行使用一个单独的表？在您的代码中，表的样式是在head部分定义的，这会影响所有表。如何为标题部分中的多个表定义不同的样式？谢谢！所以在不同的行中没有不同的单元格宽度？我必须为每一行使用一个单独的表？在您的代码中，表的样式是在head部分定义的，这会影响所有表。如何为head部分中的多个表定义不同的样式？