Question

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

我是否在以下代码中正确使用CSS？
我尝试在第二行中使用不同的单元格宽度不起作用。如何做到这一点？

<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <style>
        table {
            height: 100%;
            width: 100%;
        }

        tr.row1 {
            height: 40%;
        }

        tr.row2 {
            height: 5%;
        }

        tr.row3 {
            height: 55%;
        }

        td.colS {
            width: 40%;
        }

        td.colW {
            width: 60%;
        }
    </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>

Answer 1

添加

table-layout：fixed

到CSS进入

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

像这样：

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

＆＃13;

   table   {height: 100%; width: 100%; table-layout: fixed;}
   tr.row1 {height: 40%}
   tr.row2 {height:  5%}
   tr.row3 {height: 55%}
   td.colS {width:  40%}
   td.colW {width:  60%}

＆＃13;

<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>

＆＃13;

Answer 2

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

    <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>

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

2 个答案: