Question

我希望我的表格列宽适合其内容。现在我有一个超宽的列[0]，其余的列有宽度。

为什么会发生这种情况？如何获得我需要的输出？

感谢。

https://cloud.google.com/bigquery/pricing

@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％的宽度。如果将其移除，则cedll宽度将更均匀地间隔，因为您的内容具有相似的宽度。

如果您希望表本身是其容器的整个宽度，还要添加一些不同的CSS，您似乎已将其注释掉：

table {
    width: 100%;
}

html表适合列宽到内容

2 个答案: