Balance tables with CSS

Question

I have these tables that get created by Parsedown, a PHP based Markdown parser that does its job well.

The end result of tables in a browser is abominable though, I've included a screenshot to show what I mean.

In this two column table, I expect the left column to be significantly smaller than the right one. Normally I would just manually fix a table like this, but since the table is generated by Parsedown I can't.

I also cannot use table-layout: fixed globally since I have to accommodate for tables of all shapes and sizes.

Has anyone a solution, or just a place to start looking for one?

Just to be complete here is the generated HTML for this table:

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Small content</td>
            <td>Large content</td>
        </tr>
        <tr>
            <td>Small content</td>
            <td>Large content</td>
        </tr>
        <tr>
            <td>Small content</td>
            <td>Large content</td>
        </tr>
    </tbody>
</table>

The full computed CSS in Chrome:

Answer 1

我知道通过向表格中的所有width: 1%;和th添加td，可以轻松提高可读性。您可以尝试下面的css代码段。不知道你的限制是否很高但是如果你可以在你的桌子上添加课程我强烈建议你使用bootstrap css for tables。

table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}

table th,
table td {
  width: 1%;
  padding: .5rem;
  vertical-align: top;
}

table thead th {
  vertical-align: bottom;
}