Question

怎样用css使table里的td竖着排列

怎样用css使table里的td竖着排列
我还是上代码把
<table>
<tr>
<th>机构号</th>
<td>名称</td>
<td>电话号码</td>
<td>负责人</td>
<td>负责人电话</td>
<td>地址</td>
<td>附近车站</td>
</tr>
<tr>
<th>0001</th>
<td>总行营业部</td>
<td>88888888</td>
<td>John</td>
<td>18688888888</td>
<td>长江中路103号</td>
<td>长江中路东口</td>
</table>
这是公司的规定 不能修改表格 只能去填写css文件
怎么实现让td竖着排 就跟我上图的那样

Answer 1

可以使用css的float属性实现table里的td竖着排列。

具体步骤如下：

需要准备的材料分别是：电脑、浏览器、ultraedit。

1、在ue编辑器中新建一个空白的html文件和css文件。

2、在ue编辑器中输入以下html代码。

3、在ue编辑器中输入以下css代码。

4、编辑完成以后，在ue编辑器中点击保存，格式选择UTF8无BOM。

5、在浏览器中打开此html文件，可以看到最终想要实现的table里的td竖着排列效果。

Answer 2

你上图的表格是两列，而你的代码写成了七列，所以不对，如下：

效果如下（我没有设置边框样式，只是给你看个效果）：

Answer 3

<table cellpadding="1" cellspacing="" border="0" style="background:#0CF;
width:300px;">    <tr>        <td background="#fff">name&
lt;/td><td background="#fff">id</td>    </tr>    &
lt;tr>        <td background="#fff">1</td><
td background="#fff">小王</td>    </tr>    <tr&
gt;        <td background="#fff">2</td><
td background="#fff">小明</td>    </tr>    <tr&
gt;        <td background="#fff">3</td><
td background="#fff">小花</td>    </tr></table>

追问

能否把改成

name 1 2 3

id 小王 小明 小花

追答

name123 1小王小ming小hua

Answer 4

th, td {
display: block;
border-bottom: black solid 1px;
}

tr {
display: block;
float: left;

}

table {
display: block;
border: 1px solid;
width: 200px;
}

Answer 5

你写成两列七行不就可以了吗