html - 如何使用外部 css 将 <td> 设为新行？

Question

我是 Stack Overflow 的新手，我正在尝试从其他人创建的现有桌面版网页制作移动网页。基本上，我必须为移动设备和桌面设备使用相同的网页。对于这个带有表格的特定页面，我正在尝试使用外部样式表更改移动表格的模式。我在这篇文章中附上了 html 骨架和 css。最初，只有一行有两个 s。我想在下一行将“.td2”添加到 new 中。我尝试了一个基本表，在其中我能够降低所有转换为 tr 的工作，但在这种情况下，第二个包含一个表让我很难。我尽我所能。如果有人帮助我，我会很有帮助。

tr{
    display:table;
    width:100%;
}
.lfttbl .td1, .td2{
    display:table-row;
    border-bottom: solid 1px #2b9ed5 !important;
}

<table class="out">
    <tr><td>
        <table class="outtbl">
        <tr>
        <td>
            <table class="lfttbl">
                <tr>
                    <td class= td1>
                       <p> hihi hii
                    </td>
                  <td class= td2>
                        <table class = rttbl"">
                          
                          </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Answer 1

你的代码中有很多错误:

1. <p>没有关闭!
2. 使用表格进行布局。
3. 更糟糕的是:使用嵌套表格。

继续您的布局，我能够进行这些更正以使其在 CSS 中工作。

tr{
    display:table;
    width:100%;
}
.lfttbl .td1, .td2{
    display:table-row;
    border-bottom: solid 1px #2b9ed5 !important;
}

.td1 {
  display: block;
  background: #f00;
}

<table class="out">
    <tr><td>
        <table class="outtbl">
        <tr>
        <td>
            <table class="lfttbl">
                <tr>
                    <td class= td1>
                       <p> hihi hii</p>
                    </td>
                  <td class= td2>
                        <table class = rttbl"">
                          
                          </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>