таблица стилей строка под таблицей

Question

Я использую CSS и HTML для создания таблицы, а перед последней строкой есть горизонтальная линия. Горизонтальная линия не находится в строке таблицы, но она находится в табличных данных.

#FormatTable { 
 
    font-family: Tahoma; 
 
    font-size: 13px; 
 
} 
 
table { 
 
    border: 13px solid #33FFFF; 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    padding: 6px 14px; 
 
} 
 
tr.headerrow { 
 
    font-weight: bold; 
 
} 
 
td.tac { 
 
    text-align: center; 
 
} 
 
tr.aaa { 
 
    border-bottom: 5px solid #000000; 
 
} 
 
tr.alt2 { 
 
    font-weight: bold; 
 
    height: 25px; 
 
}

<div id="FormatTable"> 
 
    <table> 
 
    <tr class="headerrow"> 
 
     <td>Item</td> 
 
     <td>Manufacturer</td> 
 
     <td>Size</td> 
 
     <td class="tac">Unit Price</td> 
 
     <td class="tac">Quantity</td> 
 
     <td class="tac">Total Price</td> 
 
    </tr> 
 
    <tr class="rowcee"> 
 
     <td>Corn Flakes</td> 
 
     <td>Kellog's</td> 
 
     <td>18 oz.</td> 
 
     <td class="tac">2.50</td> 
 
     <td class="tac">1</td> 
 
     <td class="tac">2.50</td> 
 
    </tr> 
 
    <tr class="rowdf"> 
 
     <td>Solid White tuna</td> 
 
     <td>Starkist</td> 
 
     <td>5 oz.</td> 
 
     <td class="tac">2.79</td> 
 
     <td class="tac">2</td> 
 
     <td class="tac">5.58</td> 
 
    </tr> 
 
    <tr class="rowcee"> 
 
     <td>Cream of mushroom Soup</td> 
 
     <td>Campbell's</td> 
 
     <td>10.75 oz.</td> 
 
     <td class="tac">1.00</td> 
 
     <td class="tac">2</td> 
 
     <td class="tac">2.00</td> 
 
    </tr> 
 
    <tr class="rowdf"> 
 
     <td>2% Low Fat Milk</td> 
 
     <td>Safeway</td> 
 
     <td>0.5 gal</td> 
 
     <td class="tac">1.99</td> 
 
     <td class="tac">1</td> 
 
     <td class="tac">1.99</td> 
 
    </tr> 
 
    <tr class="aaa"> 
 
     <td>Extra-Wide Egg Noodles</td> 
 
     <td>Golden Grain</td> 
 
     <td>12 oz.</td> 
 
     <td class="tac">0.87</td> 
 
     <td class="tac">3</td> 
 
     <td class="tac">2.61</td> 
 
    </tr> 
 

 

 
    <tr class="alt2"> 
 
     <td>Total</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td class="tac">9</td> 
 
     <td class="tac">14.68</td> 
 
    </tr> 
 

 
    </table> 
 
</div>

Answer 1

#FormatTable { 
 
    font-family: Tahoma; 
 
    font-size: 13px; 
 
} 
 
table { 
 
    border: 13px solid #33FFFF; 
 
    border-collapse: separate; 
 
    border-spacing:0px; 
 
    padding:15px; 
 
} 
 
td { 
 
    padding: 6px 14px; 
 
} 
 
tr.headerrow { 
 
    font-weight: bold; 
 
} 
 
td.tac { 
 
    text-align: center; 
 
} 
 
    
 

 
tr.aaa td{ 
 
     border-bottom: 5px solid #000000; 
 
    } 
 
tr.alt2 { 
 
    font-weight: bold; 
 
    height: 25px; 
 
}

<div id="FormatTable"> 
 
    <table> 
 
    <tr class="headerrow"> 
 
     <td>Item</td> 
 
     <td>Manufacturer</td> 
 
     <td>Size</td> 
 
     <td class="tac">Unit Price</td> 
 
     <td class="tac">Quantity</td> 
 
     <td class="tac">Total Price</td> 
 
    </tr> 
 
    <tr class="rowcee"> 
 
     <td>Corn Flakes</td> 
 
     <td>Kellog's</td> 
 
     <td>18 oz.</td> 
 
     <td class="tac">2.50</td> 
 
     <td class="tac">1</td> 
 
     <td class="tac">2.50</td> 
 
    </tr> 
 
    <tr class="rowdf"> 
 
     <td>Solid White tuna</td> 
 
     <td>Starkist</td> 
 
     <td>5 oz.</td> 
 
     <td class="tac">2.79</td> 
 
     <td class="tac">2</td> 
 
     <td class="tac">5.58</td> 
 
    </tr> 
 
    <tr class="rowcee"> 
 
     <td>Cream of mushroom Soup</td> 
 
     <td>Campbell's</td> 
 
     <td>10.75 oz.</td> 
 
     <td class="tac">1.00</td> 
 
     <td class="tac">2</td> 
 
     <td class="tac">2.00</td> 
 
    </tr> 
 
    <tr class="rowdf"> 
 
     <td>2% Low Fat Milk</td> 
 
     <td>Safeway</td> 
 
     <td>0.5 gal</td> 
 
     <td class="tac">1.99</td> 
 
     <td class="tac">1</td> 
 
     <td class="tac">1.99</td> 
 
    </tr> 
 
    <tr class="aaa"> 
 
     <td>Extra-Wide Egg Noodles</td> 
 
     <td>Golden Grain</td> 
 
     <td>12 oz.</td> 
 
     <td class="tac">0.87</td> 
 
     <td class="tac">3</td> 
 
     <td class="tac">2.61</td> 
 
    </tr> 
 

 

 
    <tr class="alt2"> 
 
     <td>Total</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td class="tac">9</td> 
 
     <td class="tac">14.68</td> 
 
    </tr> 
 

 
    </table> 
 
</div>

Answer 2

Ваш тд обивка делает строку шире, чем данные в нем. Попробуйте

td:first-child { 
    padding: 6px 14px 6px 0px; 
} 
td:last-child { 
    padding: 6px 0px 6px 14px; 
} 

(Edit) Для прокладки между столом и границы, вы должны поместить рамку вокруг DIV, а не таблицы.

#FormatTable { 
    font-family: Tahoma; 
    font-size: 13px; 

    padding: 30px; 
    border: 13px solid #33FFFF; 
    width: -webkit-min-content; 
    width: -moz-min-content; 
} 
table { 
    border-collapse: collapse; 
} 

Спецификаторы ширины говорят, что div должен быть как можно более широким, чем контент, а не полный экран. Вы можете также сказать, текст ячейки не завернуть:

td { 
    padding: 6px 14px; 
    white-space: nowrap; 
}