Додати рядок межі до рядка таблиці <tr>

У мене таблиця 3 на 3. Мені потрібен спосіб додати рамку для нижньої частини кожного ряду trі надати їй певний колір.

Спочатку я спробував прямий шлях, тобто:

<tr style="border-bottom:1pt solid black;">

Але це не спрацювало. Тому я додав CSS так:

tr {
border-bottom: 1pt solid black;
}

Це все ще не спрацювало.

Я вважаю за краще використовувати CSS, оскільки тоді мені не потрібно додавати styleатрибут до кожного рядка. Я не додав borderатрибут до <table>. Я сподіваюся, що це не впливає на мій CSS.

У мене була така проблема раніше. Я не думаю, що trможна безпосередньо брати стильову форму. Моє вирішення полягало в тому, щоб стилювати стилі tdв ряд:

<tr class="border_bottom">

CSS:

tr.border_bottom td {
  border-bottom:1pt solid black;
}

Додайте border-collapse:collapseдо правила таблиці:

table { 
    border-collapse: collapse; 
}

Посилання

Використовуйте border-collapse:collapseна столі та border-bottom: 1pt solid black;на tr

Використовуйте

border-collapse:collapse як написав Натан, і вам потрібно встановити

td { border-bottom: 1px solid #000; }

Тут є безліч неповних відповідей. Оскільки ви не можете застосувати рамку до trтегу, вам потрібно застосувати її до тегів tdабо thтак:

td {
  border-bottom: 1pt solid black;
}

Це дозволить залишити невеликий простір між кожним td, що, ймовірно, не бажано, якщо ви хочете, щоб межа виглядала як би trтегом. Щоб "заповнити прогалини" так би мовити, вам потрібно використовувати border-collapseвластивість tableелемента і встановити його значення collapse, наприклад:

table {
  border-collapse: collapse;
}

Використовуйте

table{border-collapse:collapse}
tr{border-top:thin solid}

Замініть "тонку тверду речовину" властивостями CSS.

Показуйте рядок як блок.

tr {
    display: block;
    border-bottom: 1px solid #000;
}

і просто відображати альтернативні кольори:

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}

Ви можете використовувати box-shadowвластивість для підроблення межі trелемента. box-shadowДля регулювання товщини відрегулюйте положення Y (внизу зображене як 2 пікселя).

tr {
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}

Я спробував додати

    table {
      border-collapse: collapse;
    }   

поряд з

    tr {
      bottom-border: 2pt solid #color;
    }

а потім прокоментував крах кордону, щоб побачити, що працює. Щойно у мене працював селектор tr із властивістю нижньої межі!

Без кордону CSS, наприклад

Немає фотографій на кордоні

CSS Border ex.

Таблиця з фотографією на кордоні в прямому ефірі

При використанні цього методу я виявив, що простір між елементами td спричинив зазор у межі, але не маю страху ...

Один із способів цього:

<tr>
    <td>
        Example of normal table data
    </td>

    <td class="end" colspan="/* total number of columns in entire table*/">
        /* insert nothing in here */ 
    </td>
</tr>

За допомогою CSS:

td.end{
    border:2px solid black;
}

<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">

Ви можете зробити те ж саме і для всього ряду.

Існує border-bottom-style, border-top-style, border-left-style, border-right-style. Або просто border-styleце стосується всіх чотирьох кордонів одночасно.

Ви можете ознайомитись (і СПОМОБИТИ САМО в Інтернеті) більше інформації тут

Кілька цікавих відповідей. Оскільки ви просто хочете окантовку внизу (або вгорі), ось ще дві. Припустимо, що ви хочете синю облямівку товщиною 3 пікселя. У розділі стилів ви можете додати

.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}

У коді таблиці також

<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>

Іншим рішенням цього є border-spacingвластивість:

table td {
  border-bottom: 2px solid black;
}

table {
  border-spacing: 0px;
}

<table>
 <tr>
   <td>ABC</td>
   <td>XYZ</td>
</table>

Немає нижньої межі CSS:

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>

Ви не можете поставити рамку на елемент tr. Це працювало для мене у Firefox та IE 11:

<td style='border-bottom:1pt solid black'>

HTML

<tr class="bottom-border">
</tr>

CSS

tr.bottom-border {
  border-bottom: 1px solid #222;
}