微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在换行中显示描述性列,但如何在具有CSS的表之间隐藏它?

如何解决如何在换行中显示描述性列,但如何在具有CSS的表之间隐藏它?

是否可能通过仅使用html和css来显示数据的描述性列(如果它是最左边的表),而不显示它(如果它在另一个表的右边)?

类似这样的东西:

table {
        margin: 10px 0 10px 0;
        float: left;
        border-collapse: collapse;
    }
    td {
        border: 1px solid black;
    }
    <table>
    <tr>
    <td class="description">
        Descriptive Row 1 of Table 1
    </td>
    <td class="data">
        Content Row 1 of Table 1
    </td>
    </tr>
    <tr>
    <td class="description">
        Descriptive Row 2 of Table 1
    </td>
    <td class="data">
        Content Row 2 of Table 1
    </td>
    </tr>
    <tr>
    <td class="description">
        Descriptive Row n of Table 1
    </td>
    <td class="data">
        Content Row n of Table 1
    </td>
    </tr>
    </table>
    
    <table>
    <tr>
    <td class="description">
        Descriptive Row 1 of Table 2
    </td>
    <td class="data">
        Content Row 1 of Table 2
    </td>
    </tr>
    <tr>
    <td class="description">
        Descriptive Row 2 of Table 2
    </td>
    <td class="data">
        Content Row 2 of Table 2
    </td>
    </tr>
    <tr>
    <td class="description">
        Descriptive Row n of Table 2
    </td>
    <td class="data">
        Content Row n of Table 2
    </td>
    </tr>
    </table>
    
    <table>
    <tr>
    <td class="description">
        Descriptive Row 1 of Table 3
    </td>
    <td class="data">
        Content Row 1 of Table 3
    </td>
    </tr>
    <tr>
    <td class="description">
        Descriptive Row 2 of Table 3
    </td>
    <td class="data">
        Content Row 2 of Table 3
    </td>
    </tr>
    <tr>
    <td class="description">
        Descriptive Row n of Table 3
    </td>
    <td class="data">
        Content Row n of Table 3
    </td>
    </tr>
    </table>

显示如下:

+------------------------------+--------------------------++--------------------------+
| Descriptive Row 1 of Table 1 | Content Row 1 of Table 1 || Content Row 1 of Table 2 |
+------------------------------+--------------------------++--------------------------+
| Descriptive Row 2 of Table 1 | Content Row 2 of Table 1 || Content Row 2 of Table 2 |
+------------------------------+--------------------------++--------------------------+
| Descriptive Row n of Table 1 | Content Row n of Table 1 || Content Row n of Table 2 |
+------------------------------+--------------------------++--------------------------+

+------------------------------+--------------------------+
| Descriptive Row 1 of Table 3 | Content Row 1 of Table 3 |
+------------------------------+--------------------------+
| Descriptive Row 2 of Table 3 | Content Row 2 of Table 3 |
+------------------------------+--------------------------+
| Descriptive Row n of Table 3 | Content Row n of Table 3 |
+------------------------------+--------------------------+

我想将此用于具有不同屏幕尺寸的设备的灵活布局。对表使用float:left可以将它们包裹起来,但是我还没有找到隐藏表之间描述性列的方法

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。