Question

我正在尝试重新创建此表附近的内容：

http://i49.tinypic.com/2q2qwxl.png

但是，我正在变得奇怪的线条，就像我试图去做的那样。我怎么摆脱他们？或者有人能告诉我实现上图所示的最简单方法吗？这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title>Assignment #4</title>
<style>

table
    {
font-family:"Courier New", Arial, Helvetica, sans-serif;
border-collapse:collapse;
margin: auto;
border-bottom-style: double; border-top-style: double;

     }



table.border tr {border: 1px solid black; border-left: 0px solid; 
    border-right: 0px       solid;}

th
    {
font-size:18px;
font-style: bold;
padding-top:2px;
padding-bottom:2px;
background-color:lightblue;
color:#000000;


    }



    tr.white td 
    {
color:#000000;
background-color: #ffffff;
    }

td,th
    {
font-size:1em;
padding:3px 7px 2px 7px;
text-align: left;





</style>
</head>

<body>


    <body>

<h3 style="text-align: center; font-family: courier new;">
<strong>Code-page support in   microsoft windows</strong></h3>

<table class="border">
<tr>
  <th>Code-Page ID</th>
  <th style="border: 1px solid black; text-align: center;">Name</th>
  <th colspan="2">ACP OEMCP</th>
</tr
 <div>
<tr class="white">
    <td style="background-color: lightblue;" rowspan="3">1200 
        <br/>1250       
        <br/>1251</td>

    <td style="border: 1px solid black;" rowspan="3">Unicode 
      <br/>Windows 3.1 Eastern European 

      <br/>Windows 3.1 Cynillic</td>

    <td rowspan="3"><br/>X <br/>X</td>

</tr>

<tr class="white">

<td style="border: 1px solid black;"></td>


</tr>


<tr class="white">

<td style="border: 1px solid black;"></td>


</tr>

   </div>

<div>
<tr class="white">
<td style="background-color: lightblue;" rowspan="3">437 <br/>708 <br/>709</td>
<td style="border: 1px solid black;" rowspan="3">MS-DOS 
<br/>Arabic (ASMO 708)   
<br/>Arabic (ASMO 449)</td>
<td><br/></td>
<td colspan="2">X <br/>X <br/>X</td>
</tr>

<tr class="white">

<td style="border: 1px solid black;"></td>

</tr>

<tr class="white">

<td style="border: 1px solid black;"></td>

</tr>

</div>

<div>
<tr class="white">
<td style="background-color: lightblue;">Assignment#4</td>
<td style="border: 1px solid black;">
<a href="http://www.mansfield.edu">Mansfield University</a></td>
<td colspan="2"><center>
<img src="http://mansfield.edu/files/images/Facebook.gif">  </center></td>
</tr>

</div>

</table>




</body>
</html>

Answer 1

首先，图像样本的链接对我来说不起作用：（

但如果你的意思是像line1 | line2这样的垂直线是你的问题，你可以使用colspan = 2。这将导致类似line1 line2。

示例：

<tr>

<td colspan=2> </td> <td> </td> </tr>

希望这会有所帮助，

此致

Otacon

Answer 2

你的代码很乱！你把两个“身体”放了一下，忘记了一些“}”和“＆gt;”。除了问题是你在“tr”中放入空白的“td”。这里有代码：

<!DOCTYPE html>
<html>
<head>
<title>Assignment #4</title>
<style>

table {
font-family:"Courier New", Arial, Helvetica, sans-serif;
border-collapse:collapse;
margin: auto;
border-bottom-style: double; border-top-style: double;
}



table.border tr {
    border: 1px solid black; 
    border-left: 0px solid; 
    border-right: 0px solid;
}

th{
font-size:18px;
font-style: bold;
padding-top:2px;
padding-bottom:2px;
background-color:lightblue;
color:#000000;
}

tr.white td {
    color:#000000;
    background-color: #ffffff;
}

td,th{
font-size:1em;
padding:3px 7px 2px 7px;
text-align: left;
}




</style>
</head>

<body>

<h3 style="text-align: center; font-family: courier new;">
<strong>Code-page support in   microsoft windows</strong></h3>

<table class="border">
<tr>
  <th>Code-Page ID</th>
  <th style="border: 1px solid black; text-align: center;">Name</th>
  <th colspan="2">ACP OEMCP</th>
</tr>
<tr class="white">
    <td style="background-color: lightblue;" rowspan="3">1200 
        <br/>1250       
        <br/>1251</td>

    <td style="border: 1px solid black;" rowspan="3">Unicode 
      <br/>Windows 3.1 Eastern European 

      <br/>Windows 3.1 Cynillic</td>

    <td rowspan="3"><br/>X <br/>X</td>

</tr>

<tr class="white">


</tr>


<tr class="white">


</tr>
<tr class="white">
<td style="background-color: lightblue;" rowspan="3">437 <br/>708 <br/>709</td>
<td style="border: 1px solid black;" rowspan="3">MS-DOS 
<br/>Arabic (ASMO 708)   
<br/>Arabic (ASMO 449)</td>
<td><br/></td>
<td colspan="2">X <br/>X <br/>X</td>
</tr>

<tr class="white">

</tr>

<tr class="white">

</tr>
<tr class="white">
<td style="background-color: lightblue;">Assignment#4</td>
<td style="border: 1px solid black;">
<a href="http://www.mansfield.edu">Mansfield University</a></td>
<td colspan="2"><center>
<img src="http://mansfield.edu/files/images/Facebook.gif">  </center></td>
</tr>

</table>
</body>
</html>

我认为这就是你要找的东西。希望这个答案对你有帮助。

此致 LGhost

如何摆脱表格的colspan / rowspan单元格中的行？

2 个答案: