标签: css-tables

我有一张桌子,我需要两排<tr>桌子之间的间距.我是按照以下方式做到的:

table.fltrTbl
{
    margin:0px;
    padding:0px;
    border-collapse:separate;
    border-spacing:0 11px;  
}

table.fltrTbl td
{ 
    vertical-align:middle;
    padding-right:14px; 
    padding-left:0;
    padding-top:0;
    padding-bottom:0;
    margin:0;
}

table.fltrTbl tr
{ 
}

但是,这个解决方案不适用于IE7.您是否可以建议对此课程进行任何更改以使其在IE7中正常工作？

注意:请不要回答将单独的类应用于表中的每个tr.

我正在使用 tablesorter 2.0，并且我一直在尝试在单击按钮时覆盖 css 主题，但我似乎无法进行任何操作。我试图在主题文件中添加一些 css，但我认为另一个属性覆盖了它。我想要做的是更改某个类的行的背景颜色。

如果有人可以查看并告诉我将类和属性添加到此文件的位置，我们将不胜感激。

这是 tablesorter 的主题文件：

table.tablesorter {
    font-family:arial;
    background-color: #CDCDCD;
    margin:10px 0pt 15px;
    font-size: 8pt;
    width: 100%;
    text-align: left;
    border-radius:3px;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #e6EEEE;
    border: 1px solid #FFF;
    font-size: 8pt;
    padding: 4px;
}
table.tablesorter thead tr .header {
    background-image: url(bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter tbody td {
    color: #3D3D3D;
    padding: 4px;
    background-color: #FFF;
    vertical-align: top;
}
table.tablesorter tbody tr.odd td …

简而言之，我正在尝试实现与此类似的设计：

白框是图像，红色画笔是文本行（顶行将包含名称并在其专业下方）但使用 div 已被证明是有问题的，因为我无法让内容以正确的方式排列行 - 由于兼容性问题，我不太热衷于将表格用于此类用途，所以我希望这里的某人能够帮助我在我回到那个之前尝试让它与 div 一起工作.

下面是我到目前为止的代码和一个 jsfiddle 伴奏。

<div id="design-cast">
     <h4>Design</h4>

    <div class="member">
        <img src="http://i.imgur.com/OBUL7se.jpg" class="img-responsive img-thumbnail" alt="Responsive image" />
        <div class="name">Name
            <br />Description</div>
    </div>
    <div class="member">
        <img src="http://i.imgur.com/OBUL7se.jpg" class="img-responsive img-thumbnail" alt="Responsive image" />
        <div class="name">Name
            <br />Description</div>
    </div>
    <div class="member">
        <img src="http://i.imgur.com/zmPeyso.png" class="img-responsive img-thumbnail" alt="Responsive image" />
        <div class="name">Name
            <br />Description</div>
    </div>
</div>

CSS

.member {
    display: inline;
}
.name {
    display: inline;
}
.member img {
    width: 13%;
    display: block;
}

提琴手

我正在尝试创建一个带有斑马条纹的表格,其中条纹的背景颜色会拉伸屏幕的整个长度,但行的实际内容仍然在表格的范围内.

更具体地说,我正在使用Bootstrap,所以我想要的是表行的内容就好像它们在一个内部.container.

本质上,我正在尝试创建一个表格,如下所示:

<table class="table">
    <tr>
        <div class="container">
            <td>Testing</td>
            <td>Testing</td>
        </div>
    </tr>
    <tr>
        <div class="container">
            <td>Testing</td>
            <td>Testing</td>
        </div>
    </tr>
</table>

...

table, tr {
    width: 100%;
}

tr:nth-child(odd) {
    background-color: #f4f4b4;
}

理想情况下,背景颜色应该扩展浏览器窗口的整个长度,但是表格的内容应该具有居中和固定(但响应性地改变)的宽度.

但是,这实际上并不起作用,因为不可能div在tr元素内部放置.

这是我解决问题的最佳尝试:http://jsfiddle.net/4L4tatk5/3/

它接近,但不是很有效,因为表格中的单元格(蓝色轮廓)不会对齐整齐的列.我尝试尝试修改元素的不同display选项tr,但其他任何东西display: block都会导致.container有效地忽略该类.

解决这个问题的最佳方法是什么？

代码在jsfiddle上可用,但作为参考,这是我的HTML和CSS:

HTML

<div class="container control">
    <p>
        This is an example container (outlined in red) to show where the 
        contents of …

我试图让多个div占用父div的整个宽度.为了做到这一点,我使用display:table和display:table-cell.这种方法的问题是我不能为子div添加边距以便在它们之间留出一些空间.现在他们都堆叠在一起,看起来不太好.

有什么建议？

这是代码:

HTML

.parent {
      text-align:center;
      margin:0px;
      width:500px;
      padding:0px;
      background:blue;
      display:table;
      box-sizing:border-box;
      -moz-box-sizing:border-box;
      -webkit-box-sizing:border-box;
      list-style-type:none;
    }
    
.child{
      padding:15px;
      background:#f00;
      display:table-cell;
      list-style-type:none;
    }
    
.child:nth-child(2n) {background:green;}

CSS

<div class="parent">
<div class="child">sometext</div>
<div class="child">somemoretext</div>
<div class="child">sometext</div>
<div class="child">sometext</div>
</div>

这是一个实时版本:http://codepen.io/mariomez/pen/MaXjqW

默认的 html<table>元素似乎以我想要/期望的方式直接设置列宽。当我尝试将整个表格宽度设置为 100% 时会出现问题，在这种情况下，每个合理大小的列都会对齐到总宽度的 1/n%。

这是我正在谈论的一个例子

第二张桌子看起来很糟糕。绝对不需要在第一列开始换行，尤其是当现在有更多可用空间时。

唯一的区别是第二个表设置为width:100%。当然，您可以在每一列上设置精确的像素或百分比尺寸以相对于彼此进行缩放，但这开始硬编码一些关于每列有多大的猜测工作。在这种情况下，只有查看或编辑链接的列的大小可以非常小，不需要占用任何额外的空间，而有些列可以使用更多的空间来增长，例如名称/类型可能有其他更长/更短的值。

问：我能否以某种方式保持比例列格式，同时允许整个表格的大小为可用宽度的 100%？

jsFiddle 中的演示

堆栈片段中的演示

table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

table th {
    background: lightblue;
}

table th, table td {
    border: lightgrey 1px solid;
    padding: .1em 0.2em;
}

<h4>Width Not Set</h4>

<table id="example1" >
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr> …

我有以下问题。我有很多表，但它们都有不同的结构：一个有<table><thead><tbody>类型，而其他只有<table><tbody>类型。

我需要为 thead 应用 css （如果它在表中设置）或 tbody （它始终设置）。我不应该为他们两个设置样式，而只为第一个在<table>标签后面的人设置样式。

所以如果我有

<table>
 <thead>...</thead>
   <tbody>...<tbody>
</table>

那么 CSS 应该只应用于 thead。

反之亦然，如果我有：

<table>
  <tbody>...</tbody>
<table>

那么CSS应该应用于tbody。

我希望有类似“如果设置了那么......”的东西

我有一个使用传统标签设计的网站,但我需要转换为基于CSS的标签.有没有更好的方法(自由软件/工具)来做这个,而不是一次采取一个标签并转换它？

鉴于下面的HTML代码:

<tr>
   <td>Some text <a href="">Some link</a> <button>Some Button</button></td>
</tr> 

我想实现这样的目标:

我是否需要添加额外的标记,例如将div包装为左侧浮动,另一侧浮动？我还需要在td内的元素垂直对齐.

以最小额外加价实现这一目标的最佳方法是什么.

我在这里有示例代码:http://jsfiddle.net/stormwild/AAw78/17/

一个相关的问题是当一个单元格包含浮动元素时如何保持表格单元格之间文本的一致性？

我有一个CSS表,可以在我的代码中重复使用.每次使用表时,数据的大小和表的列数都会有所不同.表的最大宽度(由CSS设置)是页面的80%.但是,有时当表有一些数据(可能将表扩展到页面的50%)时,某些文本行将分成两行.如何抵消这一点,因此该表使用了所有可用空间.

这就是目前发生的事情:

我已经尝试设置表的手动宽度,但这意味着即使表宽度只需要很小,表也会保持拉伸状态.

我也尝试过使用CSS white-space:nowrap;但是如果一列中有大量数据,这会使表扩展到80%以上.

无论如何用CSS解决这两个问题？