Отзывчивая таблица - Ограничение текста в определенной ячейке до одной строки на dektop?

Question

Я пытаюсь сделать вторую ячейку на своем столе width: 100%; и текст, чтобы остаться на одной линии.

Мобильная версия работает нормально, но я не могу найти решение для настольной версии, поскольку последние ячейки не будут сбрасывать текст во второй ячейке.

Ссылка: CodePen

Кроме того, это своего рода работал:

table { 
    table-layout: fixed; 
    width: 100%; 
} 

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

Спасибо!

Answer 1

вы должны использовать ваш th, чтобы установить ширину Col в:

*, 
 
*:before, 
 
*:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
    margin: 20px auto; 
 
    table-layout: fixed;/* will also fix width to cells if specified */ 
 
    width: 100%; 
 
} 
 
table thead tr th { 
 
    text-align: left; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    background: #f8f8f8; 
 
} 
 
table thead tr th, 
 
table tbody tr td { 
 
    padding: 10px; 
 
} 
 
table tbody tr td { 
 
    border: 1px solid #e5e5e5; 
 
} 
 
table tbody tr, 
 
table thead tr { 
 
    border: 1px solid #e5e5e5; 
 
} 
 
/* set th width */ 
 
table thead tr th:first-child { 
 
    border-right: 1px solid #e5e5e5; 
 
    width: 2em;/* should be enough*/ 
 
} 
 

 
/* LAST TWO CELLS */ 
 

 
table thead tr th:nth-child(2) ~th { 
 
    width: 4em;/* should be enough*/ 
 
} 
 
/* end th width */ 
 

 
table tbody tr td:first-child { 
 
    text-align:right; 
 
    padding:0 0.25em 0 0 
 
} 
 

 
/* SECOND CELL */ 
 

 
table tbody tr td:nth-child(2) { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 
table tbody tr td:nth-child(2) ~td { 
 
    background: red; 
 
    text-align:center; 
 
} 
 
/* RESPONSIVE */ 
 

 
@media screen and (max-width: 600px) { 
 
    table { 
 
    width: 100%; 
 
    } 
 
    table thead { 
 
    display: none; 
 
    } 
 
    table tbody tr { 
 
    display: block; 
 
    } 
 
    table tbody tr td { 
 
    display: block; 
 
    text-align: center; 
 
    border: 0; 
 
    border-bottom: 1px solid #e4e5e7; 
 
    } 
 
    table tbody tr td:first-child { 
 
    background: #f8f8f8; 
 
    } 
 
    table tbody tr td:last-child { 
 
    border-bottom: 0px; 
 
    } 
 
    table tbody tr td:before { 
 
    content: attr(data-th); 
 
    font-weight: bold; 
 
    } 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>ID</th> 
 
     <th>Post Title</th> 
 
     <th></th> 
 
     <th></th> 
 
    </tr> 
 
    <tbody> 
 
     <tr> 
 
     <td data-th="POST ID: ">1</td> 
 
     <td data-th="TITLE: ">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td> 
 
     <td><a href="#">Edit</a> 
 
     </td> 
 
     <td><a href="#">Delete</a> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td data-th="POST ID: ">01</td> 
 
     <td data-th="TITLE: ">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td> 
 
     <td><a href="#">Edit</a> 
 
     </td> 
 
     <td><a href="#">Delete</a> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td data-th="POST ID: ">150</td> 
 
     <td data-th="TITLE: ">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td> 
 
     <td><a href="#">Edit</a> 
 
     </td> 
 
     <td><a href="#">Delete</a> 
 
     </td> 
 
     </tr> 
 
</table>

Answer 2

Не уверен конечная цель, но когда я сталкиваюсь с такими проблемами, я обычно создаю таблицы psuedo из div, а не используя таблицы. Это позволит вам манипулировать позиционированием блоков гораздо более свободно, чем вы можете с помощью ячеек таблицы.