表格列格式

发布于 2024-07-06 15:46:12 字数 487 浏览 8 评论 0原文

我正在尝试使用元素格式化 中的列。我可以设置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>

原文

I'm trying to format a column in a <table/> using a <col/> element. I can set background-color, width, etc., but can't set the font-weight. Why doesn't it work?

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

毁虫ゝ 2024-07-13 15:46:12

据我所知，您只能在元素上使用 CSS 来格式化以下内容：

背景颜色
边框
宽度
可见性

此页面有更多信息。

Herb 是对的 - 最好直接设置的样式。我所做的如下：

<style type="text/css">
   #mytable tr > td:first-child { color: red;} /* first column */
   #mytable tr > td:first-child + td { color: green;} /* second column */
   #mytable tr > td:first-child + td + td { color: blue;} /* third column */
   </style>
   </head>
   <body> 
   <table id="mytable">
    <tr>
      <td>text 1</td>
      <td>text 2</td>
      <td>text 3</td>
    </tr>
    <tr>
      <td>text 4</td>
      <td>text 5</td>
      <td>text 6</td>
    </tr>
    </table>

但这在 IE 中不起作用。

As far as I know, you can only format the following using CSS on the <col> element:

background-color
border
width
visibility

This page has more info.

Herb is right - it's better to style the <td>'s directly. What I do is the following:

<style type="text/css">
   #mytable tr > td:first-child { color: red;} /* first column */
   #mytable tr > td:first-child + td { color: green;} /* second column */
   #mytable tr > td:first-child + td + td { color: blue;} /* third column */
   </style>
   </head>
   <body> 
   <table id="mytable">
    <tr>
      <td>text 1</td>
      <td>text 2</td>
      <td>text 3</td>
    </tr>
    <tr>
      <td>text 4</td>
      <td>text 5</td>
      <td>text 6</td>
    </tr>
    </table>

This won't work in IE however.

回复收藏 0 原文

箜明 2024-07-13 15:46:12

最好的选择是将样式直接应用于标记。我从未使用过标记，但大多数浏览器允许您在 和

处应用格式设置>/	级别，但不是中间级别。例如，如果你有，

处应用格式设置>/ 级别，但不是中间级别。例如，如果你有，

<table>
    <tr class="Highlight">
        <td>One</td>
        <td>Two</td>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
</table>

那么这个CSS将不起作用

tr.Highlight { background:yellow }

，但这

tr.Highlight td { background:yellow }

也将：我假设你上面的代码只是为了演示目的，你实际上不会应用内联样式。

Your best bet is to apply your styling directly to the <td> tags. I've never used the <col> tag, but most browsers let you apply formatting at the <table> and <td>/<th> level, but not at an intermediate level. For example if you have

<table>
    <tr class="Highlight">
        <td>One</td>
        <td>Two</td>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
</table>

then this CSS won't work

tr.Highlight { background:yellow }

but this will

tr.Highlight td { background:yellow }

Also: I assume your code above is just for demonstration purposes and you're not actually going to apply styles inline.

回复收藏 0 原文

故事和酒 2024-07-13 15:46:12

你可能只需要这个：

tr td:first-child label {
    font-weight: bold;
}

You might have just needed this:

tr td:first-child label {
    font-weight: bold;
}

回复收藏 0 原文

ぃ弥猫深巷。 2024-07-13 15:46:12

您是否尝试过通过 CSS 类应用样式？

以下内容似乎有效：

<style type="text/css"> 
  .xx {
  background: yellow;
  color: red;
  font-weight: bold;
  padding: 0 30px;
  text-align: right;
}

<table border="1">
  <col width="150" />
  <col width="50" class="xx" />
  <col width="80" />
<thead>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    </tr>
</tbody>
</table>

col 元素的参考

Have you tried applying the style through a CSS class?

The following appears to work:

<style type="text/css"> 
  .xx {
  background: yellow;
  color: red;
  font-weight: bold;
  padding: 0 30px;
  text-align: right;
}

<table border="1">
  <col width="150" />
  <col width="50" class="xx" />
  <col width="80" />
<thead>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    </tr>
</tbody>
</table>

Reference for the col element

回复收藏 0 原文

写给空气的情书 2024-07-13 15:46:12

当我尝试设置表格样式时，请阅读本文，使第一列为粗体文本，其他四列为普通文本。
使用 col 标签似乎是可行的方法，但是虽然我可以使用 width 属性设置列的宽度，但 font-weight: 粗体不起作用
感谢您为我指出解决方案的方向。
通过设置所有 td 元素 td {font-weight:bold;} 的样式，然后使用相邻的同级选择器选择第 2-5 列，并将它们设置回正常的 td + td {font-体重：正常；}
瞧，一切都好:)