Как добавить границу строки с помощью таблицы? - PullRequest
Новая
       0

Как добавить границу строки с помощью таблицы?

0 голосов
/ 10 мая 2018

Подскажите, пожалуйста, как добавить границу для строки, используя таблицу?

вот мой код 

.table_view_el {
  border: 1px solid
}

.table_view_el tr {
  border: 1px solid
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <table cellpadding="0" cellspacing="0" class="table_view_el mrgB10">
    <tbody>
      <tr style="
        /* outline: 1px solid; */
        border-bottom: 1px solid red;
        /* border-bottom: 1pt solid black; */
    ">
        <th>Party</th>
        <th>Lead Seats</th>
        <th>Win Seats</th>
        <th>Total Seats</th>
      </tr>
      <tr style="
        /* border-bottom: 1px solid black; */
        padding: -1px;
    ">
        <td>INC</td>
        <td>0</td>
        <td>120</td>
        <td>120</td>
      </tr>
      <tr>
        <td>BJP</td>
        <td>0</td>
        <td>50</td>
        <td>50</td>
      </tr>
      <tr>
        <td>JD(S)</td>
        <td>0</td>
        <td>37</td>
        <td>37</td>
      </tr>
      <tr>
        <td>OTH</td>
        <td>0</td>
        <td>15</td>
        <td>15</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

https://jsbin.com/hosogiyaji/edit?html,css,output

Ответы [ 4 ]

0 голосов
/ 10 мая 2018

Мне кажется, что <tr> нельзя стилизовать напрямую, поэтому вы можете добавить border bottom к <td>. 

tr td {
  border-bottom: 1px solid black;
}

tr:last-child td {
  border-bottom: 0;
}
0 голосов
/ 10 мая 2018

Я обычно применяю две границы к таблице, а затем две противоположные границы к ячейкам: 

.table_view_el {
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.table_view_el th, 
.table_view_el td {
  border-top: 1px solid;
  border-left: 1px solid;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <table cellpadding="0" cellspacing="0" class="table_view_el mrgB10">
    <tbody>
      <tr style="
    ">
        <th>Party</th>
        <th>Lead Seats</th>
        <th>Win Seats</th>
        <th>Total Seats</th>
      </tr>
      <tr style="
    ">
        <td>INC</td>
        <td>0</td>
        <td>120</td>
        <td>120</td>
      </tr>
      <tr>
        <td>BJP</td>
        <td>0</td>
        <td>50</td>
        <td>50</td>
      </tr>
      <tr>
        <td>JD(S)</td>
        <td>0</td>
        <td>37</td>
        <td>37</td>
      </tr>
      <tr>
        <td>OTH</td>
        <td>0</td>
        <td>15</td>
        <td>15</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Если вам нужны только строки, переместите левую границу от ячейки к таблице

0 голосов
/ 10 мая 2018

Вы можете добавить следующее правило border-collapse в таблицу, чтобы отобразить границы строк: 

table {
  border-collapse: collapse;
}


.table_view_el {
  border: 1px solid
}

.table_view_el tr {
  border: 1px solid
}

table {
border-collapse: collapse;
}
<table cellpadding="0" cellspacing="0" class="table_view_el mrgB10">
  <tbody>
    <tr style="border-bottom: 1px solid red;">
      <th>Party</th>
      <th>Lead Seats</th>
      <th>Win Seats</th>
      <th>Total Seats</th>
    </tr>
    <tr style="padding: -1px;">
      <td>INC</td>
      <td>0</td>
      <td>120</td>
      <td>120</td>
    </tr>
    <tr>
      <td>BJP</td>
      <td>0</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>JD(S)</td>
      <td>0</td>
      <td>37</td>
      <td>37</td>
    </tr>
    <tr>
      <td>OTH</td>
      <td>0</td>
      <td>15</td>
      <td>15</td>
    </tr>
  </tbody>
</table>
0 голосов
/ 10 мая 2018

Я думаю, что мы можем применить границы к тд, чтобы вы могли использовать этот код для решения. 

td {
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...