html - 如何让我的 <td> 表现得像 <tr>

标签 html css

您好,我正在尝试使表格响应,我需要像表格行一样相互响应和堆叠

HTML

<html >
<head> 
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="teststyles.css"> 
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<link href="media-queries.css" rel="stylesheet" type="text/css">
</head>

<body>
<table> 
<tr>  
    <td> 
        <p> Stuff </p>
    </td> 
    <td > 
        <p> Stuff </p>
     </td> 
    <td > 
        <p> Stuff </p>
    </td>  
</tr>
</table>
</body>
</html>

CSS

table{
    width: 990px; 
    margin: 0 auto;
}
tr{
    display:table;
    width:100%;
 }
td{
    display:table-row;
    background:#efefef;
 }

所以我认为 table-row 使元素表现得像 table 行,但由于某种原因它不像一个元素那样堆叠。有什么想法或提示吗?

编辑:enter image description here

当我在常规 html 上打开它时看起来像这样但是当我在 fiddle 上打开它时它很棒

最佳答案

您的 HTML 文件中需要一个文档类型。第一行应该是:

<!DOCTYPE html>

关于html - 如何让我的 <td> 表现得像 <tr>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24517974/

相关文章:

html - 在 CSS 中隐藏表格列

javascript - 隐藏最初隐藏的下拉列表重复项

jquery - AngularJS中的比较运算符函数

html - CSS:如何清除 float 对象只有一层,而不是一直到左边?

javascript - Jquery Range Slider - 低填充部分 - 如何填充背景色

html - 是否可以设置html表单输入文本框的选择颜色?

html - 有人可以解释这个网站上标记区域背后的代码吗?

css - grunt 在多个地方创建输出 CSS 的问题

html - 使用 alpha 继承父背景颜色会使子背景颜色不同。为什么?

javascript - 将页脚粘贴到页面底部