html表格大小

html-css026

html表格大小,第1张

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>

.td{width: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>

.td{width:100pxoverflow:hidden}

</style>

<table width="400">

<tr>

<td class="td"></td>

<td class="td"></td>

<td class="td"></td>

<td class="td"></td>

</tr>

<table>

用这种方法,可以把超过的部分隐藏掉,如果需要严格控制的话,可以采用这种方法,如果把overflow的属性值设置成scroll或者auto的话,可以在超过的时候使用滚动条调节....

表格的宽度设置都知道: <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" ...>...

 1、利用 height属性,这样是直接拉高 td 单元格的高度,缺点:文字不能对齐

2、做为height属性文字垂直不对齐的补充,增加 line-height属性,与height相同时则垂直居中,但换行则会导致两行间距太大。

3、padding-top padding-bottom 可以增加上下边距,很好用的属性,在bootstrap框架中是通过这个属性实现表格样式的。就算多行,也是一样保持间距。

或者结合使用,选择一款适合的。

.table tr td { padding:10px 0} 这样设置省事。

实现代码:

<table cellspacing="0" style="color:#FFFtext-align:leftfont-size:14pxfont-weight:boldmargin-left:220pxwidth:980pxheight:200pxtext-align:center">

<tr >

<td bgcolor="e91e6f"style=" width:196px">01</td>

<td bgcolor="224071"style=" width:196px">02</td>

<td bgcolor="f12339"style=" width:196px">03 </td>

<td bgcolor="1ea27e"style=" width:196px">04</td>

<td bgcolor="224071"style=" width:196px">05</td>

</tr>

<tr>

<td bgcolor="1ea27e">06</td>

<td bgcolor="e91e6f">07</td>

<td bgcolor="224071">08</td>

<td bgcolor="f12339">09 </td>

<td bgcolor="1ea27e">10</td>

</tr>

<tr>

<td bgcolor="e91e6f">11</td>

<td bgcolor="224071">12</td>

<td bgcolor="f12339">13</td>

<td bgcolor="1ea27e">14 </td>

<td bgcolor="224071">15</td>

</tr>

<tr>

<td bgcolor="1ea27e">16</td>

<td bgcolor="e91e6f">17</td>

<td bgcolor="224071">18</td>

<td bgcolor="f12339"></td>

<td bgcolor="1ea27e"></td>

</tr>

</table>