Как сделать ширину td фиксированной?

Question

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

относительный код показан как следует:

I попробовали так много способов исправить это, но ни работали, в чем проблема, как я могу это исправить?

---

консоль показать, как это:

Answer 1

@wuxue можно непосредственно использовать встроенный CSS стиль = "ширина :;" или создать класс в css и применить его.

Answer 2

Смотрите эту скрипку, используя colgrouphttps://jsfiddle.net/j6vdk8c0/

<table> 
    <colgroup> 
    <col width="100px"> 
    <col width="200px"> 
    <col width="300px"> 
    <col width="400px"> 
    </colgroup> 
    <thead> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
     <td>5</td> 
    </tr> 
    </thead> 
</table> 

Answer 3

Вы можете использовать display:table вместо таблиц

Пример:

.table { 
 
    display: table; 
 
    border-collapse: collapse; 
 
} 
 
    
 
.table .table-row { 
 
    display: table-row; 
 
} 
 
    
 
.table .table-cell { 
 
    display: table-cell; 
 
    text-align: left; 
 
    vertical-align: top; 
 
    border: 1px solid black; 
 
}

<div class="table"> 
 
\t <div class="table-row"> 
 
\t \t <div class="table-cell">test</div> 
 
\t \t <div class="table-cell">test1123</div> 
 
\t </div> 
 
\t <div class="table-row"> 
 
\t \t <div class="table-cell">test</div> 
 
\t \t <div class="table-cell">test123</div> 
 
\t </div> 
 
</div>