Сделать ячейку таблицы той же шириной, что и ее контейнер

Я пытаюсь сделать ячейки таблицы (td) той же ширины, что и таблица. Также устраните черное пространство между каждой ячейкой.Сделать ячейку таблицы той же шириной, что и ее контейнер

Вот мой код:

<div class="col-md-12" style="background-color: white; font-size: 19px; text-align:left;height:378px;color:#6D6E71;padding-left:0px;padding-right:0px;"> 

<table style="margin:0px;font-size: 16px;width:100%;padding:0px; color:black;"> 
    <tr > 
    <td style="background:blue; padding:15px 20px;width:100%">First agenda</td> 
    </tr> 

    <tr> 
    <td style="background:red;padding:15px 20px;width:100%;">second agenda</td> 
    </tr> 

    <tr> 
    <td style="background:yellow;padding:15px 20px;width:100%;">thrid agenda</td> 
     </tr>     
</table> 
</div>

Вот как это выглядит:

Мне нужно, чтобы каждая ячейка таблицы заполнить черные области. Я уже удалил прокладки контейнера.

Заранее благодарю вас за помощь!

источник

2016-12-03 WoShiNiBaBa

https://jsfiddle.net/z8ygsmv4/ Добавить границы-крах: https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse – sinisake

@nevermind Большое спасибо! Борьба с крахом делает эту работу. – WoShiNiBaBa

Я просто подумал, что семантически и, возможно, в упрощенной форме, это больше похоже на список, чем на таблицу. –

td { 
 
    margin: 0; 
 
    width: 100%; 
 
    padding: 15px 20px; 
 
} 
 

 
table { 
 
    background-color: black; 
 
    border-collapse: collapse; 
 
    font-size: 16px; 
 
    width:100%; 
 
    padding:0px; 
 
    margin: 0px; 
 
}

<table> 
 
    <tr > 
 
    <td style="background:blue">First agenda</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td style="background:red">second agenda</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td style="background:yellow">third agenda</td> 
 
     </tr>     
 
</table>

Это пример использования border-collapse: collapse, чтобы удалить границы.

источник

2016-12-03 16:57:18 StardustGogeta

Спасибо за помощь! – WoShiNiBaBa

Все, что вам нужно сделать, это установить cellspacing="0" и cellpadding="0" и стиль border:none !important; к <table> следующим образом:

<div class="col-md-12" style="background-color: white; font-size: 19px; text-align:left;height:378px;color:#6D6E71;padding-left:0px;padding-right:0px;"> 
 

 
<table cellspacing="0" cellpadding="0" style="margin:0px;font-size: 16px;width:100%;padding:0px; color:black;border:none !important;"> 
 
    <tr > 
 
    <td style="background:blue; padding:15px 20px;width:100%">First agenda</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td style="background:red;padding:15px 20px;width:100%;">second agenda</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td style="background:yellow;padding:15px 20px;width:100%;">thrid agenda</td> 
 
     </tr>     
 
</table> 
 
</div>

источник

2016-12-03 17:28:55 Sybarium

Я предлагаю вам сохранить стиль в отдельной таблице стилей для удобства, я надеюсь, что это помогло;) – Sybarium

Благодарим за помощь! – WoShiNiBaBa

@WoShiNiBaBa с наилучшими пожеланиями, рад, что я помог вам! – Sybarium

Сделать ячейку таблицы той же шириной, что и ее контейнер

ответ

Смежные вопросы