为什么 HTML table 列宽度小于要求的宽度?
Why is the HTML table column width less that what is required?
我正在使用 PHP echo
动态输入更改条目到 HTML table。但是当我打开包含 table 的页面时,它有时会完美加载,而其他时候则以一种特殊的方式呈现。这可能是什么问题?
编辑:这是我的代码。
HTML/PHP
<div class="my-table-container">
<table>
<tr>
<th>Rank</th>
<th>School Code</th>
<th>Level</th>
<th>Time Completed</th>
</tr>
<?php
$rank = 1;
for($x=0;$x<$no;$x++)
{
echo "<tr>";
echo "<td>".$rank."</td>";
echo "<td>".$arr[$x]['scl_name']."</td>";
echo "<td>".$arr[$x]['lvl']."</td>";
echo "<td>".$arr[$x]['tlc']."</td>";
echo "</tr>";
$rank++;
}
?>
</table>
</div>
CSS
.my-table-container{
background : #eaf7ee;
border : 1px solid #c6d9ce;
padding : 3%;
padding-bottom : 2%;
margin : 0px auto;
flex-basis : 50%;
text-align : center;
margin-top: 4%;
margin-bottom: 4%;
}
.my-table-container table{
background-color: white;
margin: 0px auto;
border-collapse: collapse;
}
table,th,td{
border : 1px solid black;
}
th,td{
padding: 4%;
font-size: 20px;
font-family: 'Lato', sans-serif;
text-align: center;
vertical-align: middle;
}
添加
white-space: nowrap;
要么是整个内容,要么只是第一行,这样标题就不会被压扁。
此外,不要使用 % 进行填充,而是使用固定数字,例如 4px
.my-table-container{
background : #eaf7ee;
border : 1px solid #c6d9ce;
padding : 3%;
padding-bottom : 2%;
margin : 0px auto;
flex-basis : 50%;
text-align : center;
margin-top: 4%;
margin-bottom: 4%;
}
.my-table-container table{
background-color: white;
margin: 0px auto;
border-collapse: collapse;
}
table,th,td{
border : 1px solid black;
}
th,td{
padding: 4%;
font-size: 20px;
font-family: 'Lato', sans-serif;
text-align: center;
vertical-align: middle;
}
<div class="my-table-container" cellpadding="5">
<table>
<tr>
<th>Rank</th>
<th>School Code</th>
<th>Level</th>
<th>Time Completed</th>
</tr>
<?php
$rank = 1;
for($x=0;$x<$no;$x++)
{
echo "<tr>";
echo "<td>".$rank."</td>";
echo "<td>".$arr[$x]['scl_name']."</td>";
echo "<td>".$arr[$x]['lvl']."</td>";
echo "<td>".$arr[$x]['tlc']."</td>";
echo "</tr>";
$rank++;
}
?>
</table>
</div>
我希望它的工作能够快速响应
我正在使用 PHP echo
动态输入更改条目到 HTML table。但是当我打开包含 table 的页面时,它有时会完美加载,而其他时候则以一种特殊的方式呈现。这可能是什么问题?
编辑:这是我的代码。
HTML/PHP
<div class="my-table-container">
<table>
<tr>
<th>Rank</th>
<th>School Code</th>
<th>Level</th>
<th>Time Completed</th>
</tr>
<?php
$rank = 1;
for($x=0;$x<$no;$x++)
{
echo "<tr>";
echo "<td>".$rank."</td>";
echo "<td>".$arr[$x]['scl_name']."</td>";
echo "<td>".$arr[$x]['lvl']."</td>";
echo "<td>".$arr[$x]['tlc']."</td>";
echo "</tr>";
$rank++;
}
?>
</table>
</div>
CSS
.my-table-container{
background : #eaf7ee;
border : 1px solid #c6d9ce;
padding : 3%;
padding-bottom : 2%;
margin : 0px auto;
flex-basis : 50%;
text-align : center;
margin-top: 4%;
margin-bottom: 4%;
}
.my-table-container table{
background-color: white;
margin: 0px auto;
border-collapse: collapse;
}
table,th,td{
border : 1px solid black;
}
th,td{
padding: 4%;
font-size: 20px;
font-family: 'Lato', sans-serif;
text-align: center;
vertical-align: middle;
}
添加
white-space: nowrap;
要么是整个内容,要么只是第一行,这样标题就不会被压扁。
此外,不要使用 % 进行填充,而是使用固定数字,例如 4px
.my-table-container{
background : #eaf7ee;
border : 1px solid #c6d9ce;
padding : 3%;
padding-bottom : 2%;
margin : 0px auto;
flex-basis : 50%;
text-align : center;
margin-top: 4%;
margin-bottom: 4%;
}
.my-table-container table{
background-color: white;
margin: 0px auto;
border-collapse: collapse;
}
table,th,td{
border : 1px solid black;
}
th,td{
padding: 4%;
font-size: 20px;
font-family: 'Lato', sans-serif;
text-align: center;
vertical-align: middle;
}
<div class="my-table-container" cellpadding="5">
<table>
<tr>
<th>Rank</th>
<th>School Code</th>
<th>Level</th>
<th>Time Completed</th>
</tr>
<?php
$rank = 1;
for($x=0;$x<$no;$x++)
{
echo "<tr>";
echo "<td>".$rank."</td>";
echo "<td>".$arr[$x]['scl_name']."</td>";
echo "<td>".$arr[$x]['lvl']."</td>";
echo "<td>".$arr[$x]['tlc']."</td>";
echo "</tr>";
$rank++;
}
?>
</table>
</div>
我希望它的工作能够快速响应