表格更改最后一个tr的宽度

Question

我有这个表，我的问题是最后一行，因为有不同的宽度和一些单元格组合。

html就是这个

  <table border="1" width="820" cellpadding="2">
    <caption align="bottom">description</caption>
    <tr>
        <th>lorem ipsum</th>
        <th>lorem ipsum lorem ipsum lorem ipsum</th>
        <th>lorem ipsum</th>
        <th>lorem ipsum</th>
        <th>lorem ipsum</th>
        <th>lorem ipsum</th>
    </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5(3x4)</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Nume produs</td>
        <td></td>
        <td>1</td>
        <td>89,00</td>
        <td>89,00</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Nume produs</td>
        <td></td>
        <td>1</td>
        <td>89,00</td>
        <td>89,00</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Cost livrare</td>
        <td></td>
        <td>1</td>
        <td>15,00</td>
        <td>15,00</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Cost livrare</td>
        <td></td>
        <td>1</td>
        <td>15,00</td>
        <td>15,00</td>
    </tr>
    <tr height="210">
        <td colspan="1">Lorem ipsum</td>
        <td colspan="2">Lorem ipsum</td>
        <td rowspan="2">Lorem</td>

    </tr>   
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>

这是我的尝试，但我无法理解如何做像图像这样的事情。我使用colspan和rowspan但我不知道在这种情况下如何正确使用它们

Answer 1

每次在某行上有垂直分隔时，它必须是此行上的2个不同单元格以及其他行（或者被colspan值考虑在内。

我使用一些背景颜色复制粘贴您的HTML代码：http://codepen.io/anon/pen/awfvC
在最后一行中，您将前两个单元格“LOREM IPSUM”和“LOREM IPSUM”分开。所以它是2个单元格（并且第一个已经有colspan =“2”，因为第一行中的第0,1,2,3列...并且前面的行应该有2个单元格（或更高的colspan值）产品名称。

红色应该考虑的细胞：

Answer 2

这是我能为您做的最好的事：http://jsfiddle.net/CvYm5/

<table border="1" width="820" cellpadding="2">
<tr>
    <th>lorem ipsum</th>
    <th>lorem ipsum lorem ipsum lorem ipsum</th>
    <th>lorem ipsum</th>
    <th>lorem ipsum</th>
    <th>lorem ipsum</th>
    <th>lorem ipsum</th>
</tr>
<tr>
    <td>0</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5(3x4)</td>
</tr>
<tr>
    <td>1</td>
    <td>Nume produs</td>
    <td></td>
    <td>1</td>
    <td>89,00</td>
    <td>89,00</td>
</tr>
<tr>
    <td>2</td>
    <td>Nume produs</td>
    <td></td>
    <td>1</td>
    <td>89,00</td>
    <td>89,00</td>
</tr>
<tr>
    <td>3</td>
    <td>Cost livrare</td>
    <td></td>
    <td>1</td>
    <td>15,00</td>
    <td>15,00</td>
</tr>
<tr>
    <td>3</td>
    <td>Cost livrare</td>
    <td></td>
    <td>1</td>
    <td>15,00</td>
    <td>15,00</td>
</tr>
<tr height="110">
    <td colspan="2" rowspan="2">Lorem ipsum</td>
    <td colspan="2" rowspan="2">Lorem ipsum</td>
    <td>Total</td>
    <td>Lorem</td>
</tr>   
<tr>
    <td>1</td>
    <td height="140">LOREM ISPUM 104 Lei</td>
</tr>

Answer 3

这是你需要细胞的小提琴。只需要放置你的身高和宽度就可以了。

http://jsfiddle.net/BC4A8/

Use RowSpan and Colspan to merge rows and cols