标签: css-tables

我的页面底部有3列链接.每列都放入一个div中,所有三个div都被包装成一个以页面为中心的大div.这是一个更适合表格的东西,还是一个表格错误的工作元素？

我正在研究一个仅限IE的网站并使其跨浏览器.在IE,Chrome和Safari中,一切都很好看.然而Firefox并不开心.

我有一个名为"datatable"的表类,顾名思义就是数据表.我试图让它延伸到它所包含的div的宽度的100%.上面的div是100%.当我使用萤火虫检查它时,桌子伸展到100%.但是,Firefox生成的tbody并没有达到100%.因此,表中的行与tbody一样小.所以我不知道如何解决这个问题.我试过 tbody{width:100%;},它什么也没做.

任何想法我都会非常感激.

我们假设div中有很多div:

<div id="#container">
 div div div div
</div>

内部div甚至可以彼此相邻.现在我想将所有的则之间5px的填充,就像cellspacing的table.

有人可以向我解释为什么max-height不能用于table元素吗？

这是代码

我有以下代码和CSS.它适用于Chrome,但不适用于IE.有没有办法让它在IE中运行？

CSS:

<style type="text/css">
        .table {width:100%;height: 1%;background-color: lime;display: table;border-collapse: collapse;}
        .row {display: table-row;}
        .centercell {vertical-align: top;display: table-cell;background-color: #0f0;}
        .top{background-color:yellow;width:100%;height:20px;z-index: 1;position: relative;}
        .bottom{background-color:yellow;width:100%;height:20px;z-index: 1;position: relative;}
        .middle{background-color:pink;width:100%;height: 100%;margin: -20px 0px;position: relative;padding: 20px 0px;}
        .rightcell {vertical-align: top;background-color: #f00;display: table-cell;width:155px;background-image: url('img/bg1.gif');background-repeat:repeat-y}
        .leftcell {vertical-align: top;background-color: #f00;display: table-cell;width:171px;}
    </style>

HTML:

<div class="table">
<div class="row">
    <div class="leftcell">
        right column
    </div>
    <div class="centercell">
        <div class="top">center top</div>
        <div class="middle">center middle</div>
        <div class="bottom">center bottom</div>
    </div>
    <div class="rightcell">
        right column<br> 
        right column<br> 
        right column<br> 
        right column<br> 
        right column<br> 
        right column<br> 
        right …

我运行一个生成HTML页面的脚本,但是我无法正确格式化生成的表格.需要制作一个尽可能宽的桌子.目前,我必须指定一个特定的宽度(1500px),以便每个单元格的内容不会换行到下一行.这是一个例子:

With width set to 1500px:
+-----------------------------+------------------------------+
|Contents of my cell          | Contents of other cell       |
+-----------------------------+------------------------------+

With width set to 100%:
+-------------------+--------------------+
|Contents of my     |Contents of other   |
|cell               |cell                |
+-------------------+--------------------+

理想情况下,我的文本不会换行(例如,当宽度设置为1500px时),但不必设置静态表格宽度.有时,表格可能需要比1500更宽(或更小),所以我希望宽度尽可能地动态.

这是我目前正在使用的CSS:

<style type="text/css">
h1 {
    text-shadow: rgba(255, 255, 255, 0.796875) 0px 1px 0px;
    font-family: Georgia,"Times New Roman","Bitstream Charter",Times,serif;
    font-weight: normal;
    padding: 7px 7px 8px;
    text-align: left;
    line-height: 1.3em;
    font-size: 24px;
}
table {
    border: 1px solid #DFDFDF;
    background-color: #F9F9F9;-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px; …

我正在关注响应表的示例:http: //dbushell.com/demos/tables/rt_05-01-12.html

但我有显示为inline-block的表行之间的奇怪的空间,这里有一个演示:http://codepen.io/anon/pen/Fksjw

我尝试将边距归零,但我无法摆脱这个空间.

我给了我的两个表格相同的样式来创建1px边框,但问题是当两个表相互接触时,顶部表格的底部边框和底部表格的顶部边框相遇并创建看起来像2px边框.

正如你在这里看到的:jsfiddle

这是我用来设置表格样式的CSS:

table,td, th {
   border-style:solid;
   border-width:1px;
   border-color:#000;
}

我试过了,border-collapse:collapse;但它似乎没有做到这一点.

我正试图设计一种命令栏.它必须在IE9中工作,因此flexbox已经用完了.相反,我正在使用display:table布局.

第一个片段(使用<span>s)是我喜欢它的样子.第二个片段是正确的HTML,它没有正确的样式.元素布局不正确,将第二个按钮按下一行,边框不会折叠.

有没有办法解决这个问题,而不包括按钮？如果我这样做,我必须撤消并重做很多样式才能将边框放在包装器上.如果一切都失败了,我想我可以代替<button>使用<span role="button" tabindex="0">无处不在.

html {
  font-size: 24px;
  line-height: 1rem;
}
* {
  font: 18px Calibri;
  box-sizing: border-box;
}
.controls {
  margin: 1rem;
  height: 1rem;
  width: 800px;
  border: 1px solid #c77;
  background-color: #eee;
  display: table;
  border-collapse: collapse;
}
.controls > * {
  display: table-cell;
  white-space: nowrap;
}
.spacer {
  width: 99%;
}
button,
span {
  height: 1rem;
  border: 1px solid #7c7;
  padding: 0 0.5rem;
  background: #f7f7f7;
}

<div class="controls">
  <div>Title</div>
  <div …

在下面的代码中,如何将文本中心放置在其正上方的边框空间中,如下面的屏幕截图所示,"Some Text 1"和"Some Text 2"位于它们上方的边框空间的中心.

.Row {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 10px;
}

.Column {
  display: table-cell;
  background-color: red;
}

.Column:nth-child(1) {
  width:20%;
}
.Column:nth-child(2) {
  width:50%;
}
.Column:nth-child(3) {
  width:30%;
}

<div class="Row">
  <div class="Column">C1</div>
  <div class="Column">C2</div>
  <div class="Column">C3</div>
</div>