Question

嘿伙计们我最近用HTML创建了这个表。图像：http://imgur.com/wPXCwrd 表格（如图所示）创建完美但创建了一个奇怪的空白行（图像中标记为红色）。当我尝试删除该代码时，QUESTIONS行下面的整个单元格都会移动（图像链接：http://imgur.com/jBfmNGV）。如何在MEN单元格后删除该空白单元格？

CODE：

<!DOCTYPE html>
<html>      
    <body>
        <table align="left" border="1" cellpadding="3" cellspacing="3">
        <tbody>
        <tr>
            <td colspan="5">QUESTIONAIRE RESULTS</td>
        </tr>
        <tr>
            <td rowspan="3">QUESTIONS</td>
            <td colspan="2" rowspan="2">WOMEN</td>
            <td colspan="2" rowspan="2">MEN</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>YES</td>
            <td>NO</td>
            <td>YES</td>
            <td>NO</td>
        </tr>
        <tr>
            <td>Question 1</td>
            <td>42%</td>
            <td>58%</td>
            <td>61%</td>
            <td>39%</td>
        </tr>
        <tr>
            <td>Question 2</td>
            <td>53%</td>
            <td>47%</td>
            <td>69%</td>
            <td>31%</td>
        </tr>
        <tr>
            <td>Question 3</td>
            <td>26%</td>
            <td>74%</td>
            <td>51%</td>
            <td>49%</td>
        </tr>
        <tr>
            <td>Question 4</td>
            <td>40%</td>
            <td>60%</td>
            <td>60%</td>
            <td>40%</td>
        </tr>
    </tbody>
</table>
    </body>
</html>

Answer 1

只需删除：

<td>&nbsp;</td>

所以你的最终代码将是：

<!DOCTYPE html>
<html>      
    <body>
        <table align="left" border="1" cellpadding="3" cellspacing="3">
        <tbody>
        <tr>
            <td colspan="5">QUESTIONAIRE RESULTS</td>
        </tr>
        <tr>
            <td rowspan="3">QUESTIONS</td>
            <td colspan="2" rowspan="2">WOMEN</td>
            <td colspan="2" rowspan="2">MEN</td>
        </tr>
        <tr>

        </tr>
        <tr>
            <td>YES</td>
            <td>NO</td>
            <td>YES</td>
            <td>NO</td>
        </tr>
        <tr>
            <td>Question 1</td>
            <td>42%</td>
            <td>58%</td>
            <td>61%</td>
            <td>39%</td>
        </tr>
        <tr>
            <td>Question 2</td>
            <td>53%</td>
            <td>47%</td>
            <td>69%</td>
            <td>31%</td>
        </tr>
        <tr>
            <td>Question 3</td>
            <td>26%</td>
            <td>74%</td>
            <td>51%</td>
            <td>49%</td>
        </tr>
        <tr>
            <td>Question 4</td>
            <td>40%</td>
            <td>60%</td>
            <td>60%</td>
            <td>40%</td>
        </tr>
    </tbody>
</table>
    </body>
</html>

预览：https://jsfiddle.net/3q6n9v7k/

Answer 2

更正确的答案是更改rowspan和colspan。

而不是

 <tr>
            <td rowspan="3">QUESTIONS</td> //
            <td colspan="2" rowspan="2">WOMEN</td>
            <td colspan="2" rowspan="2">MEN</td>
 </tr>

这样做

 <tr>
      <td rowspan="2">QUESTIONS</td>
      <td colspan="2" rowspan="1">WOMEN</td>
      <td colspan="2" rowspan="1">MEN</td>             
 </tr>

同样删除：

 <tr>
      <td>&nbsp;</td>
 </tr>

结帐Fiddle

HTML表格无法正常显示

2 个答案: