Элемент таблицы не растягивается на 100%

Question

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

Таким образом, я пытался растянуть элемент, который обрабатывает «последние сообщения» до конца, и я несколько раз пытался с ним поработать, чтобы изменить отображение и изменить способ его форматирования.

ПРИМЕЧАНИЕ: Из-за беспорядка на рассматриваемом веб-сайте я потратил время на то, чтобы завершить все, что было проблемой, и решение в единый JSFiddle ... Это должно облегчить для понимания решение.

JSFiddle: https://jsfiddle.net/zm7bpr8p/2/

<table width="1000" border="1"> 
<thead> 
<tr> 
<th>Test1</th> 
<th>Test2</th> 
<th>HEAD1</th> 
<th>HEAD2</th> 
<th>Comments</th> 
</tr> 
</thead> 
<tr> 
<td>Test1</td> 
<td>Test2</td> 
<td class="DR1">DISABLED</td> 
<td class="DR2">DISABLED2</td> 
<td>Comments</td> 
</tr> 
</table> 

Answer 1

У вас есть проблемы с столбцами вашей таблицы.

Ваша первая строка имеет 5 ячеек, но другие имеют только 3 («.threads» и «.posts» не отображаются).

Скрыть эти две ячейки также в вашем th и решить проблему.

Transform:

td.threads, td.posts { 
    display: none; 
    padding: 0px !important; 
} 

To:

td.threads, td.posts, th.threads, th.posts { 
    display: none; 
    padding: 0px !important; 
} 

Answer 2

В вашей "нить" вашего стола, есть еще пять колонок с "нитями" и "должности" по-прежнему видны. Кажется, вы пропустили добавление этого стиля CSS.

/*Add this CSS style*/ 

.list >thead .threads, .list >thead .posts { 
    display: none; 
} 

или вы можете просто скрыть все столбцы «threads» и «posts».

/*Add this CSS style*/ 
.list .threads, .list .posts { 
    display: none; 
} 

надеюсь, что это может помочь вам;)