レスポンステーブル - 特定のセルのテキストをデスクトップ上の1行に制限しますか？

Question

テーブルの2番目のセルをwidth: 100%;にしてテキストを1行にとどめようとしています。

モバイル版は正常ですが、最後のセルで2番目のセルのテキストが折りたたまれないため、デスクトップ版のソリューションが見つかりません。

リンク：

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

しかし、たとえすべてのセルの幅を作っ：CodePen

はまた、このちょっと働きました。 （2番目のセルを全幅にし、残りのセルを内側のコンテンツに合わせたい）

ありがとう！

Answer 1

：私は見

*, 
 
*: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

最終的な目標はわかりませんが、このような問題が発生したときは、通常、テーブルを使用するのではなくdivから擬似テーブルを作成します。これにより、テーブルセルを使用するよりもはるかに自由にブロックの位置を操作できます。あなたはCOLの幅を設定するためにあなたのthを使用する必要があります