Heim > Web-Frontend > HTML-Tutorial > table td 宽度的问题_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-21 09:45:06
Original
1178 Leute haben es durchsucht

<table>  <tr>	<td width="100px"> A </td>	<td width="50%"  > B </td>	<td width="100px"> C </td>	<td width="50%"  > D </td>  </tr></table>
Nach dem Login kopieren
Nach dem Login kopieren


表格有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>
Nach dem Login kopieren
Nach dem Login kopieren


表格有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>
Nach dem Login kopieren

<table width="100%">  <tr>    <td width="100"> A </td>    <td> B </td>    <td width="100"> C </td>    <td> D </td>  </tr></table>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage