Home > Web Front-end > HTML Tutorial > table td 宽度的问题_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-21 09:45:06
Original
1192 people have browsed it

<table>  <tr>	<td width="100px"> A </td>	<td width="50%"  > B </td>	<td width="100px"> C </td>	<td width="50%"  > D </td>  </tr></table>
Copy after login
Copy after login


表格有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>
Copy after login
Copy after login


表格有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>
Copy after login

<table width="100%">  <tr>    <td width="100"> A </td>    <td> B </td>    <td width="100"> C </td>    <td> D </td>  </tr></table>
Copy after login

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>
Copy after login

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template