Размер границы таблицы - CSS / HTML - PullRequest
Новая
       8

Размер границы таблицы - CSS / HTML

1 голос
/ 17 июня 2011

Можно ли расширить ширину / высоту границы ячейки, чтобы она соединялась с границей окружающей таблицы?

У меня есть это: 

<table width="270px" style="border: 1px;">
   <tbody width="270px">
        <tr>
            <th colspan="3" style="border: 1px;">
                Header
            </th>
        </tr>
        <tr>
            <td style="border: 1px;" valign="middle">
                Left-hand cell
            </td>  
            <td valign="middle">
                Right-hand cell
            </td>
            <td>
                Left-hand cell
            </td>
        </tr>
    </tbody>
</table>

То, что происходит, - это то, что внутренние границы не встречают внешнюю границу - есть небольшой разрыв.

Могу ли я заставить эти границы встретиться?

Ответы [ 2 ]

4 голосов
/ 17 июня 2011

Посмотрите на CSS border-collapse. 

table 
{ 
    border-collapse: collapse; 
}

Также посмотрите на этот ответ на как достичь cellpadding и cellspacing вCSS .

Из ответа Муравья П. :

... только для полноты:

  • padding → cellpadding
  • border-spacing → cellspacing
  • border-collapse → нет эквивалента HTML

Также стоит помнить, что вы можете установитьОтдельные горизонтальные и вертикальные значения для CSS, например, интервал границы: 0 1px.

2 голосов
/ 17 июня 2011

Попробуйте и дайте мне знать: 

<table width="270px" style="border: 1px;" cellspacing="0" cellpadding="0">
   <tbody width="270px">
        <tr>
            <th colspan="3" style="border: 1px;">
                Header
            </th>
        </tr>
        <tr>
            <td style="border: 1px;" valign="middle">
                Left-hand cell
            </td>  
            <td valign="middle">
                Right-hand cell
            </td>
            <td>
                Left-hand cell
            </td>
        </tr>
    </tbody>
</table>
...