Rumah > hujung hadapan web > html tutorial > table td 宽度的问题_html/css_WEB-ITnose

table td 宽度的问题_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-21 09:45:06
asal
1173 orang telah melayarinya

<table>  <tr>	<td width="100px"> A </td>	<td width="50%"  > B </td>	<td width="100px"> C </td>	<td width="50%"  > D </td>  </tr></table>
Salin selepas log masuk
Salin selepas log masuk


表格有4列,A C 固定 100px宽, B和D把剩余的宽度平分,如何实现这样的效果?


回复讨论(解决方案)

<table>  <tr>	<td width="100px"> A </td>	<td width="50%"  > B </td>	<td width="100px"> C </td>	<td width="50%"  > D </td>  </tr></table>
Salin selepas log masuk
Salin selepas log masuk


表格有4列,A C 固定 100px宽, B和D把剩余的宽度平分,如何实现这样的效果?
楼主的 table 不是 定宽
是依据什么来 固定宽度的?

table 的宽度是 100% 适应屏幕的。

table 的宽度是 100% 适应屏幕的。

<table  width="100%" >  <tr>    <td width="100px"> A </td>    <td  style="background-color:red" > B </td>    <td width="100px"> C </td>    <td   style="background-color:green"> D </td>  </tr></table>
Salin selepas log masuk

<table width="100%">  <tr>    <td width="100"> A </td>    <td> B </td>    <td width="100"> C </td>    <td> D </td>  </tr></table>
Salin selepas log masuk

B 和 D 列不指定宽度的话,可以保证他们平分吗,比如D列的内容很长需要换行显示的。

你的不就可以吗?加上边框就可以观察到
不指定宽度就会按内容分配

B 和 D 列不指定宽度的话,可以保证他们平分吗,比如D列的内容很长需要换行显示的。

<table  style=" table-layout: fixed;word-break:break-all;word-wrap:break-word;width:100%"  >  <tr>    <td width="100px"> A </td>    <td    > B </td>    <td width="100px"> C </td>    <td  > Ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</td>  </tr></table>
Salin selepas log masuk

尽量不要让浏览器自己判断宽度。
常用的做法是,只留一个td不定义宽度,其余的都定义。

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan