标签: css-tables

我正在尝试<table/>使用<col/>元素格式化列.我可以设置background-color,width等等,但不能设置font-weight.为什么不起作用？

<table>
    <col style="font-weight:bold; background-color:#CCC;">
    <col>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

使用div构建我的站点并应用display:table属性(display:tr,display:tr)有什么好处.这是不是意味着div的行为与tr和td元素完全相同？

我知道我可能根本不应该使用表格或表格行为进行布局,但我只是好奇是否存在差异和好处？

我希望表格的宽度为100%,但只有一列可以有一个自由宽度,如:

| A | B | C                                                                  |

因此A和B列的宽度应与其内容的宽度相匹配,但C的宽度应该一直持续到表格结束.

好吧我可以指定A和B的宽度(以像素为单位),但问题是这些列的内容宽度不固定,所以如果我设置一个固定的宽度,它将完全不匹配内容:(

PS:我没有使用实际的表项,而是包含在div中的DL列表.div有display:table,dl有display:table-row,dt/dd display:table-cell ...

我需要一种方法来只显示表格中的垂直线条.

我试图将border-left和border-right添加到:table和单独的td中:1px solid #red;.但它不会添加边框颜色.

所以我正在寻找的是创建这些垂直线的简单方法.

W3指定表列(包含<col>元素)只允许四个CSS规则- 边框,背景,宽度和可见性.

有谁知道这个决定背后的原因？如果你可以有边框和背景,为什么不能使用字体和颜色？

我有一个表格,应用了以下CSS规则:

table { border-collapse: collapse; }
td { border: 2px solid Gray; }

我希望某些单元格有红色边框.

td.special { border: 2px solid Red; }

这不符合我的预期.在FireFox 3和IE8中它看起来像这样:

IE8/FF3渲染http://control-v.net/stackoverflow/1241757/ie8ff3.jpg

在IE7兼容模式(在IE8中运行),它看起来像这样:

IE7兼容模式渲染http://control-v.net/stackoverflow/1241757/ie7.jpg

我希望这四个方面<td>都是红色的.我怎样才能做到这一点？可在此处找到测试用例.

我正在尝试构建一个html表,但我想强制所有行具有相同的高度(无论单元格中有多少内容).如果一个单元格超出了空间,我希望它只是切断文本并隐藏其余部分.

这可能是使用CSS等吗？

我想使用CSS来设置表格外边框的颜色......然后内部单元格会有不同的边框颜色......

我创建了这样的东西:

table {
     border-collapse:collapse;
     border: 1px solid black; 
}

table td {
     border: 1px solid red;
}

问题是,桌子的颜色会变成红色,你可以在这里看到:http://jsfiddle.net/JaF5h/

如果表的边框宽度增加到2px,它将起作用:http://jsfiddle.net/rYCrp/

我一直在处理CSS和跨浏览器问题这么久......这是我第一次面对这样的事情而且我完全陷入困境......不知道该怎么做!

任何人都知道如何使用border-width进行修复:1px？

我有一个长话......

p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCx+wnDhlr7GqHiH6lAaPPuN5F7RjUrtvGyxxZkClJsLaTDeqg/FuJXU7RYdPQ2Ka++tfw0Z9+SRKatLUQQeCqLK8z1/V4p7BaJKPkegMzXgWGnFVmz1tdLFiYUGq0MvVgqWiepcTFmwgSd9g1pGRiCSDHJUDwcc+NidiW4/ixw4QIDAQAB"

...我试图适应表格单元格(<td>),我已尝试使用word-wrap: break-word;它等强制文本换行,但它们似乎都没有对文本产生任何影响.

(这里是现场例子)

点击图片放大!

文本在水平上继续,并且不会换行.我应该在这里使用哪个CSS属性？

代码

<table>
     <thead>
          <tr>
                <th>Name
                </th><th>Type
                </th><th>Value
                </th><th>TTL
          </th></tr>
     </thead>
     <tbody>
          <tr>
                <td>wtnmail._domainkey.whatthenerd.com.</td>
                <td>TXT</td>
                <td>"v=DKIM1; k=rsa; p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCx+wnDhlr7GqHiH6lAaPPuN5F7RjUrtvGyxxZkClJsLaTDeqg/FuJXU7RYdPQ2Ka++tfw0Z9+SRKatLUQQeCqLK8z1/V4p7BaJKPkegMzXgWGnFVmz1tdLFiYUGq0MvVgqWiepcTFmwgSd9g1pGRiCSDHJUDwcc+NidiW4/ixw4QIDAQAB"</td>
                <td>300</td>
          </tr>
     </tbody>
</table>

CSS

基于j08691的回答,我现在正在使用它:

table {
   table-layout: fixed;
   word-break: break-all;
   word-wrap: break-word;
}

这导致了这个:

点击图片放大!

是的,桌子不像过去那样超级时尚,但现在我至少可以确定数据显示(即使浏览器调整大小,即较小的分辨率).

仍在寻找一个优雅的解决方案,如果有的话.

这是一个用CSS Grid Layout创建的表,但我遇到了问题,我无法在每一行上创建悬停状态.

我只想使用CSS.

任何人都可以给我一个解决方案吗？

.table {
  display: grid;
  grid-template-columns: [col-start] auto [col-end];
  grid-template-rows: [header-start] 50px [header-end row-start] auto [row-end];
  grid-auto-rows: auto;
  grid-auto-columns: auto;
  grid-gap: 1px;
}

.table>* {
  background: gray;
  padding: 10px;
}

.heading {
  background: navy;
  color: #fff;
  grid-row: header;
}

<div class="table">
  <div class="heading">Title 1</div>
  <div class="heading">Title 2</div>
  <div class="heading">Title 3</div>
  <div class="heading">Title 4</div>
  <div class="heading">Title 5</div>

  <div class="row">Row 1</div>
  <div class="row">Row 1</div>
  <div class="row">Row 1</div>
  <div class="row">Row 1</div>
  <div class="row">Row 1</div>

  <div class="row">Row 2</div>
  <div class="row">Row …