Question

是否可以让最后一个＆lt; td＆gt;在一个＆lt; tr>在不使用任何jQuery或javaScript的情况下，它表现得像一个完全新的行？

<table>
 <tr>
  <td>normal td</td>
  <td>normal td</td>
  <td>normal td</td>
  <td class="i-want-to-be-a-row">row content</td>
 </tr>

在这个例子中，我希望带有“i-want-to-a-row”的td表现得像一个新行。

我尝试过类似的东西：

.i-want-to-be-a-row {
 display:block;
}

但我认为这是错误的方式;）

Answer 1

为什么不把它放在新的一行？

func alert(info:String) {
        let popUp = UIAlertController(title: "Title", message: info, preferredStyle: UIAlertControllerStyle.Alert)
        popUp.addAction(UIAlertAction(title: "OK!", style: UIAlertActionStyle.Default, handler: {alertAction in
            popUp.dismissViewControllerAnimated(true, completion: nil)
        }))
        self.presentViewController(popUp, animated: true, completion: nil)
    }

Answer 2

这是一个使用flexbox的解决方案（更清洁）：

<强> CSS

table, tbody, tr, td {
    display: block;
}
tr {
    display: flex;
    flex-flow: row wrap;
}
td {
    flex: 1 0 30%;
    border: solid 1px green;
}

<强> HTML

<table>
    <tr>
        <td>normal td</td>
        <td>normal td</td>
        <td>normal td</td>
        <td class="i-want-to-be-a-row">row content</td>
    </tr>
</table>

<强> DEMO HERE

让最后一个表现得像一个新行

2 个答案: