Table Styling with XHTML 1.0 Transitional
I am trying to add a border and padding to the table row of XHTML 1.0 Transitional web page (see code below to repro). I know that if I change the type of page to something else, I will be able to add borders and padding to the table rows and cells. But in XHTML 1.0 Transitional, it doesn't work at all.
Considering that I can't change the DOCTYPE, what am I suppose to do add a border and padding to the table?
&l开发者_开发技巧t;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
table
{
border: solid 1px black;
}
tr
{
/* Doesn't work */
margin: 10px;
border: solid 1px black;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
</body>
</html>
Try seeing if the border and margin works on the td.
td
{
margin: 10px;
border: solid 1px black;
}
If it does you'll have to make it top/bottom margin only for center cells.
If you want them around each cell, apply the style to the td element, not the tr: Assuming you want it on the tr, I'm not entirely sure why this works, but adding border-collapse to the table will make the tr border work:
table
{
border: 1px solid black;
border-collapse:collapse;
}
tr
{
/*use if you want the lines to be per row instead of per cell*/
border: 1px solid black;
}
For the margins, I'd go with applying padding to the td elements:
td
{
padding: 10px;
/*use if you want lines between each cell*/
border: 1px solid black;
}
加载中,请稍侯......
精彩评论