html - 使用 Bootstrap 对齐 HTML 中的文本

Question

示例

 text a b c d
 text2 a b c d
 text3 a b c d

结果应该是

 text              a              b           c           d
 text2             a              b           c           d
 text3             a              b           c           d

我该怎么做？解决方案可能不依赖于 Bootstrap 。只是为了获得这样的 View 。

Answer 1

http://jsfiddle.net/ptwL7

HTML

<table class="kenos-table">

    <th colspan="4">You could have a header if you wanted</th>

    <tr>
        <td>text 1</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
    </tr>

    <tr>
        <td>text 2</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
    </tr>

    <tr>
        <td>text 3</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
    </tr>

    <tr>
        <td>text 4</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
    </tr>

</table>

CSS

.kenos-table {
    width: 100%;
    max-width: 40em;
    border: 1px solid orange;
    border-collapse: collapse; /* key - remove me to see */   
}

.kenos-table th {
    display: none;
}

.kenos-table tr {
    /* - */
}

.kenos-table td {
    width: 20%;
    border: 1px solid gray;
}