标签: css-tables

表行上的CSS box-shadow tr似乎不能跨浏览器一致地工作.在某些浏览器上显示阴影; 在别人身上,没有影子.

我正在使用以下CSS:

tr {
  background-color: rgb(165, 182, 229);
  box-shadow: 0px 2px 2px black;
  -moz-box-shadow: 0px 2px 2px black;
  -webkit-box-shadow: 0px 2px 2px black;
}
td, th {
  padding: 5px;
  text-align: left;
}

这是以下代码段的jsFiddle:

tr {
  background-color: rgb(165, 182, 229);
  box-shadow: 0px 2px 2px black;
  -moz-box-shadow: 0px 2px 2px black, ;
  -webkit-box-shadow: 0px 2px 2px black;
}
td, th {
  padding: 5px;
  text-align: left;
}

<table>
  <tr>
    <td>&nbsp;</td>
    <th>One</th>
    <th>Two</th>
  </tr>
  <tr>
    <th>Title</th>
    <td>Three</td>
    <td>Four</td> …

好吧,在设计一个网站时,我遇到了一个想法...我的网站的一些部分更适合作为表格,但不是表格数据.出于某种原因,我真的很烦我使用表格来表示不是桌子的东西.所以我注意到CSS的显示选项,但我无法让它正常工作.这是我正在尝试的.有什么问题？

<div class="table">
  <div class="tr">
    <div class="td">Row 1, Cell 1</div>
    <div class="td">Row 1, Cell 2</div>
    <div class="td">Row 1, Cell 3</div>
  </div>
  <div class="tr">
    <div class="td">Row 2, Cell 1</div>
    <div class="td">Row 2, Cell 2</div>
    <div class="td">Row 2, Cell 3</div>
  </div>
</div>

这就是CSS的样子.

div.table {border: 1px solid black; display: table; }
div.tr {border: 1px solid black; display: table-row; }
div.td {border: 1px solid black; display: table-cell; }

我希望页面看起来像一张桌子,但'细胞'都是新的.有什么想法吗？

我想要一个由三个相邻div组成的布局.边div具有静态宽度(可以通过javascript更改)并且中心div填充剩余区域.当第一个div的大小改变时,它只影响中心的大小.它类似于由三列组成的表(带有动态渲染).

好的,问题出在哪里.问题是,如果我将浮动左div放入第一列,并在第二列和第三列中阻塞div,则块div以奇怪的方式运行.它们在第一列浮动div下方的列中呈现.

一个例子.在第一列和第二列中,我有浮动div,并在第三列中有块div.块div在浮动div的高度附近向下移动.中间列中的Div不会在其y位置移动,只是它具有浮动左侧属性.

我希望三个布局div中的每一个都相互独立.我不知道为什么第三列中的元素在前两列中浮动div(使用float属性).

码:

<div style="margin: auto; display: table; width: 260px;">
        <div style="display: table-row;">
            <div style="display: table-cell; width: 100px;">

                <div style="float: left; width: 40px; height: 50px;">COL1</div> 

            </div>
            <div style="display: table-cell;">

                <div style="float: left; height: 50px;  width: 40px;">COL2</div>

            </div style="display: table-cell; width: 100px;">
            <div class="sideContainer">

                <div>COL3</div>

            </div>
        </div>
</div>

结果: 结果

如何解决这个问题.如何使所有布局div(列)彼此独立.有任何想法吗？

http://jsfiddle.net/fQv97/

HTML

<div class="table-cell">
    My text, should be align middle
</div>

CSS

.table-cell {
    height: 200px;
    width: 200px;
    vertical-align: middle;
    background: #eee;
    display: table-cell;
    position: absolute;
}

问题

文本应放在我的"表格单元格"的中间.一切都按预期工作,直到我添加"position:absolute".现在它不能再将我的内容放在中间了？为什么不？它仍然知道我的高度和宽度,因为我在我的CSS中设置它.

有什么聪明的解决方法吗？

有一个第三方内容网站,我必须通过动态内容"嵌入",我现在不知道Ajax或Jquery所以我想知道是否可以将表格单元格转换为新行,基本上创建一个新行.

嵌入最终得到:

<table>
<tr>
<td></td>
<td></td>
</tr>
</table>

表中没有任何类或ID,但它是页面上唯一的表,它有太多的内容可以放在一行,这是一个移动网站,所以我必须使整个页面320像素宽.

是否可以单独使用CSS？

我无法插入新的HTML,内容是从我们无权访问的安全服务器动态创建的,但我们使用API​​密钥来访问.. mediaqueries工作.

我目前正在尝试尝试以下方面的内容:

td {clear:both;}

由于页面的CSS文件,我有一个具有某种样式的表(它有蓝色边框等等).

有没有一种简单的方法来删除该特定表的CSS？我正在思考像命令这样的命令:

style="nostyle"

有这样的事吗？

目前该表太宽,导致浏览器添加水平滚动条.

我有一个表格样式,我如何text-align:left;只应用于第一列和text-align:right;其他列？

这是我的表示例:

http://jsfiddle.net/gianlucaguarini/hAv7P/

目前,所有列都保留了text-align.

我的表(在Chrome,FireFox和Opera上完美运行)无法在Internet Explorer上正确显示.

背景仍为白色!(我使用的是IE-8)

CSS代码:

/*My Table*/
.my_table{
border-collapse:collapse;
font:normal 14px sans-serif,tahoma,arial,verdana;
margin:5px 0;
}

.my_table th{
color:#fff;
background:#5E738A;
border:1px solid #3C5169;
text-align:center;
padding:4px 10px;
}

.my_table td{
color:#555;
border:1px solid #C1CAD4;
text-align:center;
padding:2px 5px;
}

.my_table tr:nth-child(even){
background:#E6EDF5;
}

.my_table tr:nth-child(odd){
background:#F0F5FA;
}

请注意,我并非尝试解决任何特定问题,而是试图了解 导致此问题的原因.

我已经设置了width,height和display一些div的,但是高度/宽度设置没有被兑现.该文本也被推向下方.

http://jsfiddle.net/k7esv/

1)为什么height在表格行中设置时向下推文本然后height删除时将文本放在顶部？

2)为什么宽度/高度设置不受尊重？

3)为什么不设置margin属性对它们有任何影响？

http://jsfiddle.net/k7esv/1/