在html中怎样控制表格的宽度

Posted 2023-03-03

表格的宽度设置都知道： <table width="960px" border="1" align="center">..</table>

宽度虽然是这样设置的，但是<td>的内容如果超出就还是可能会改变table的宽度，

这样就有两种情况，如果你不想改变宽且也不想改变行高，可是设置: overflow: hidden;
text-overflow:ellipsis;

而如果你的高度可以改变，及单元格的内容超出可以自动换行的话，可以设置 <table style="

word-break: break-all;  word-wrap:break-word;" ...>...

参考技术A

参考代码如下：

<table border="1" width="960px">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td width="500px">固定宽度</td>
<td width="460px">固定宽度</td>
</tr>
<tr>
<td>固定宽度</td>
<td>固定宽度</td>
</tr>
</table>

定义和用法

width 属性规定表格单元格的宽度。

通常，单元格占用的空间就是它显示内容需要的空间。width 属性用于为单元格设置预定义的宽度。

参考技术B

参考代码如下：

<table border="1" width="960px">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td width="500px">固定宽度</td>
    <td width="460px">固定宽度</td>
  </tr>
  <tr>
    <td>固定宽度</td>
    <td>固定宽度</td>
  </tr>
</table>

效果图：

说明：

定义和用法

width 属性规定表格单元格的宽度。

通常，单元格占用的空间就是它显示内容需要的空间。width 属性用于为单元格设置预定义的宽度。

参考技术C 1,使用传统的方法
<table width="400">
<tr>
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
</tr>
<table>
2,使用css
<style>
.tdwidth:100px;
</style>
<table width="400">
<tr>
<td class="td"></td>
<td class="td"></td>
<td class="td"></td>
<td class="td"></td>
</tr>
<table>
以上两种方法可能出现的问题就是,如果内容超过设定,如图片宽度大于100,会自然撑开,自动调节表格宽度

3,用css
<style>
.tdwidth:100px;overflow:hidden
</style>
<table width="400">
<tr>
<td class="td"></td>
<td class="td"></td>
<td class="td"></td>
<td class="td"></td>
</tr>
<table>
用这种方法,可以把超过的部分隐藏掉,如果需要严格控制的话,可以采用这种方本回答被提问者采纳 参考技术D width属性，<td width="50px"></td>