html таблица подходит ширина столбца к контенту

Question

Я хотел бы, чтобы ширина столбца таблицы соответствовала его контенту. Прямо сейчас я получил суперширокий столбец [0], а остальные столбцы имеют соответствующую ширину.

Почему это происходит и как мне получить результат, который мне нужен?

Спасибо.

@extends('app') 

@section('content') 

<style> 
    /*table {*/ 
     /*table-layout: auto;*/ 
     /*border-collapse: collapse;*/ 
     /*width: 100%;*/ 
    /*}*/ 
    /*table td {*/ 
     /*border: 1px solid #ccc;*/ 
    /*}*/ 
    table td.absorbing-column { 
     width: 100%; 
    } 
</style> 


<h1>Query Results</h1> 
<?PHP 
    $keys = array_keys(get_object_vars($results[0])); 
    echo "<table class=\"table table-bordered table-condensed\"><tr><th>".implode("</th><th>", $keys)."</th></tr>"; 
?> 
    @foreach ($results as $result) 
     <tr> 
      @foreach ($keys as $key) 
       <td class="absorbing-column"> 
        {{$result->$key}} 
       </td> 
      @endforeach 
     </tr> 
    @endforeach 
</table> 
@endsection 

Answer 1

У вас есть ширина таблицы установлена ​​на 100%. Попытайтесь свести его к более низкому проценту или используйте px.

Answer 2

Полностью удалить следующий CSS:

table td.absorbing-column { 
    width: 100%; 
} 

Этот CSS, дает каждому <td> ширину 100%. Если вы удалите его, ширина кедра будет более равномерно распределена, так как ваш контент имеет одинаковую ширину.

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

table { 
    width: 100%; 
}