当前位置： 文江博客话题详情

CSS 表格样式

发布于 2024-07-08 03:01:28 字数 335 浏览 10 评论 0原文

我需要将桌子设计成圆角。

我只是在考虑如何最好地解决这个问题：

通常，当我将 div 设置为圆角时，我会使用 2 个 div，顶部和底部带有空注释，并应用调整大小和大小。 背景图像 CSS 给他们。

然而，该表格有内部边框，因此我必须仔细对齐角落背景图像中的垂直线，以与真实的单元格边框相匹配。

这样就清楚了吗 远的？

所以我想知道其他人会如何处理这个问题。 我认为我能做的最好的事情就是只使用一个完整的固定大小的背景图像、边框和所有内容，并在顶部覆盖一个无边框表格。 毕竟桌子的大小总是相同的。

有人能想出更好的方法吗？

原文

I need to style a table to have rounded corners.

I'm just looking at how best to go about it:

Normally when I style a div to have rounded corners, I use 2 divs with empty comments at the top and bottom, and apply sizing & background image CSS to them.

The table, however, has internal borders, so I'd have to carefully align the vertical lines in the corner bg images, to match with the true cell borders.

Is this clear so
far?

So I was wondering how others would approach this. I think the best thing I can do is to just use one complete fixed size background image, borders and all, and overlay a borderless table on top. The table will always be the same size after all.

Can anyone think of a better way?

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

扫码二维码加入Web技术交流群

发布评论

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

评论（6）

樱娆 2024-07-15 03:01:28

25 种方法... http://www. cssjuice.com/25-rounded-corners-techniques-with-css/

其实方法有太多了。

25 ways to do it.... http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

Actually, there are too many ways to do it.

回复 原文
江南烟雨〆相思醉 2024-07-15 03:01:28

你最好制作一个只有角的背景图像，而不是边框​​。
将类应用于左上角、右上角、左下角和右下角单元格，以定义应使用角背景图像。

并使用 css 设置边框样式。 不要将它们放在背景图像中。

在您的方法中，您总是会发现背景图像中的垂直线与实际表格单元格的边框不匹配。

You better make a background image with just the corners, and not the borders.
Apply a class to the top left, top right, bottom left and bottom right cell, to define that the corners-background image should be used.

And style the borders with css. Don't put them in the background image.

In your approach, you'll always gonna end up having the vertical lines in your background image not match the borders of the actual table cells.

回复 原文
浅紫色的梦幻 2024-07-15 03:01:28

做这样的事情...

XHTML：（抱歉必须删除第一个“<”，因为它不允许我正常发布它，修复这个杰夫！）

table id="pricing" border="0" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>Incoming calls</th>
      <th>National calls</th>
      <th>Calls to US & Canada</th>
      <th>Calls to other Phones</th>
      <th>Calls to other Countries</th>
      <th>SMS text messages</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Select</td>
      <td>country</td>
      <td>from</td>
      <td>dropdown</td>
      <td>list</td>
      <td>above</td>
    </tr>
  </tbody>
</table>

CSS：
＃价钱
{
字体粗细：粗体；
文本对齐：居中
。

  #pricing thead
  {
    background-image:url("images/pricing_top.gif");
    background-position:top;
    background-repeat:no-repeat;
    padding:10px 0 0 /* replace 10px with the height of pricing_top.gif */
  }

  #pricing th
  {
    background-image:url("images/pricing_header_bg.gif");
    background-repeat:repeat-y;
    border-bottom:1px solid #c3c2c2;
    width:100px /* replace 100px with the width of pricing_header_bg.gif */
  }

  #pricing tbody
  {
    background-image:url("images/pricing_bottom.gif");
    background-position:bottom;
    background-repeat:no-repeat;
    padding:0 0 10px /* replace 10px with the height of pricing_bottom.gif */
  }

  #pricing td
  {
    background-image:url("images/pricing_cell_bg.gif");
    background-repeat:repeat-y;
    width:100px /* replace 100px with the width of pricing_cell_bg.gif */
  }

唯一的缺点是您必须创建 4 个图像，但这不会花费太长时间 如果您想在右侧添加阴影并相应地更改其背景图像和宽度属性，您还需要向每行的最后一个单元格添加一个类。

Do something like this...

XHTML: (sorry had to remove first '<' as it wouldn't let me post it normally, FIX THIS JEFF!)

table id="pricing" border="0" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>Incoming calls</th>
      <th>National calls</th>
      <th>Calls to US & Canada</th>
      <th>Calls to other Phones</th>
      <th>Calls to other Countries</th>
      <th>SMS text messages</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Select</td>
      <td>country</td>
      <td>from</td>
      <td>dropdown</td>
      <td>list</td>
      <td>above</td>
    </tr>
  </tbody>
</table>

CSS:
#pricing
{
font-weight:bold;
text-align:center
}

  #pricing thead
  {
    background-image:url("images/pricing_top.gif");
    background-position:top;
    background-repeat:no-repeat;
    padding:10px 0 0 /* replace 10px with the height of pricing_top.gif */
  }

  #pricing th
  {
    background-image:url("images/pricing_header_bg.gif");
    background-repeat:repeat-y;
    border-bottom:1px solid #c3c2c2;
    width:100px /* replace 100px with the width of pricing_header_bg.gif */
  }

  #pricing tbody
  {
    background-image:url("images/pricing_bottom.gif");
    background-position:bottom;
    background-repeat:no-repeat;
    padding:0 0 10px /* replace 10px with the height of pricing_bottom.gif */
  }

  #pricing td
  {
    background-image:url("images/pricing_cell_bg.gif");
    background-repeat:repeat-y;
    width:100px /* replace 100px with the width of pricing_cell_bg.gif */
  }

Only drawback is that you have to create 4 images, but that shouldn't take too long. You'll also need to add a class to the final cell in each row if you want to add that drop shadow on the right and just change it's background-image and width property accordingly.

回复 原文
巷子口的你 2024-07-15 03:01:28

根据您最初的想法，您可以向每个角单元添加一个类，从而有效地关闭它们各自的违规边框。 然后，您可以在 中使用全角背景图像。 和 考虑圆角的元素。

其余单元格的边框可以打开，并且线条将正确对齐。

唯一剩下的问题是如何处理那个被破坏的阴影。 这是一个不同的练习。

Playing off of your original idea, you could add a class to each corner cell effectively turning off their respective offending borders. You could then use a full-width background image in the <thead> and <tfoot> elements to account for the rounded corners.

The rest of the cells can have their borders turned on, and the lines will line up correctly.

The only remaining issue is accounting for that blasted drop shadow. That's a different exercise.

回复 原文
蓦然回首 2024-07-15 03:01:28

更好的方法是使用 9 网格，其中背景角以及顶部、底部、左侧和右侧背景重复

您的表格位于单元格 5 中

编辑

正如一些评论中发布的那样，您无法使用 9 网格实现效果。
你必须做一个 12 网格系统（现在由我组成:)

现场演示

。

代码：

警告：它不漂亮，但可以使用

<html>
<head>
    <style>


        .cell1 {background: #f8f8f8 url(images/cell1.gif) no-repeat left top; height: 10px; font-size: 1px;}
        .cell2 {background: #f8f8f8 url(images/cell2.gif) repeat-x top; height: 10px; font-size: 1px; border-right: solid 1px #c3c2c2; font-weight:bold;  }
        .cell3 {background: #f8f8f8 url(images/cell3.gif) no-repeat right top; height: 10px; font-size: 1px;}

        .cell4 {background: white url(images/cell4.gif) repeat-y left; border-bottom: solid 1px #c3c2c2; width: 13px; }
        .cell5 {background-color: #f8f8f8; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:bold; border-bottom: solid 1px #c3c2c2; }
        .cell6 {background: white url(images/cell6.gif) repeat-y right; border-bottom: solid 1px #c3c2c2; width: 18px; }

        .cell7 {background: white url(images/cell7.gif) repeat-y left; width: 13px;}
        .cell8 {background-color: white; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:normal;  }
        .cell9 {background: white url(images/cell9.gif) repeat-y right; width: 18px;}


        .cell10 {background: white url(images/cell10.gif) no-repeat left bottom; height: 17px;font-size: 1px; }
        .cell11 {background: white url(images/cell11.gif) repeat-x bottom; border-right: solid 1px #c3c2c2; height: 17px; font-size: 1px; }
        .cell12 {background: white url(images/cell12.gif) no-repeat right bottom; height: 17px;font-size: 1px; }

        .lastcolumn, th.lastcolumn, td.lastcolumn {border-right: solid 0px #c3c2c2; }

    </style>
</head>
<body>


<table id="pricing" border="0" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th class="cell1"></th>
      <th class="cell2"> </th>
      <th class="cell2"> </th>
      <th class="cell2"> </th>
      <th class="cell2"> </th>
      <th class="cell2"> </th>
      <th class="cell2 lastcolumn"> </th>
      <th class="cell3"></th>
    </tr>
    <tr>
      <th class="cell4"> </th>
      <th class="cell5">Incoming calls</th>
      <th class="cell5">National calls</th>
      <th class="cell5">Calls to US & Canada</th>
      <th class="cell5">Calls to other Phones</th>
      <th class="cell5">Calls to other Countries</th>
      <th class="cell5 lastcolumn">SMS text messages</th>
      <th class="cell6"> </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="cell7"></td>
      <td class="cell8">Select</td>
      <td class="cell8">country</td>
      <td class="cell8">from</td>
      <td class="cell8">dropdown</td>
      <td class="cell8">list</td>
      <td class="cell8 lastcolumn">above</td>
      <td class="cell9"></td>
    </tr>
    <tr>
      <td class="cell10"></td>
      <td class="cell11"> </td>
      <td class="cell11"> </td>
      <td class="cell11"> </td>
      <td class="cell11"> </td>
      <td class="cell11"> </td>
      <td class="cell11 lastcolumn"> </td>
      <td class="cell12"></td>
    </tr>
  </tbody>
</table>


</body>
</html>

注意：有一些不间断的空格可以从代码中删除。 查看实时演示以了解更多信息

享受吧！

A better way would be a 9-grid where you have the background corners, and top, bottom, left and right backgrounds repeating

Your table goes in cell 5

Edit

As some posted in the comments you can not achieve the effect with a 9-grid.
You have to do a 12-grid-system (made up by me right now :)

Live demo

.

Code:

Warning: it's not pretty, but works

<html>
<head>
    <style>


        .cell1 {background: #f8f8f8 url(images/cell1.gif) no-repeat left top; height: 10px; font-size: 1px;}
        .cell2 {background: #f8f8f8 url(images/cell2.gif) repeat-x top; height: 10px; font-size: 1px; border-right: solid 1px #c3c2c2; font-weight:bold;  }
        .cell3 {background: #f8f8f8 url(images/cell3.gif) no-repeat right top; height: 10px; font-size: 1px;}

        .cell4 {background: white url(images/cell4.gif) repeat-y left; border-bottom: solid 1px #c3c2c2; width: 13px; }
        .cell5 {background-color: #f8f8f8; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:bold; border-bottom: solid 1px #c3c2c2; }
        .cell6 {background: white url(images/cell6.gif) repeat-y right; border-bottom: solid 1px #c3c2c2; width: 18px; }

        .cell7 {background: white url(images/cell7.gif) repeat-y left; width: 13px;}
        .cell8 {background-color: white; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:normal;  }
        .cell9 {background: white url(images/cell9.gif) repeat-y right; width: 18px;}


        .cell10 {background: white url(images/cell10.gif) no-repeat left bottom; height: 17px;font-size: 1px; }
        .cell11 {background: white url(images/cell11.gif) repeat-x bottom; border-right: solid 1px #c3c2c2; height: 17px; font-size: 1px; }
        .cell12 {background: white url(images/cell12.gif) no-repeat right bottom; height: 17px;font-size: 1px; }

        .lastcolumn, th.lastcolumn, td.lastcolumn {border-right: solid 0px #c3c2c2; }

    </style>
</head>
<body>


<table id="pricing" border="0" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th class="cell1"></th>
      <th class="cell2"> </th>
      <th class="cell2"> </th>
      <th class="cell2"> </th>
      <th class="cell2"> </th>
      <th class="cell2"> </th>
      <th class="cell2 lastcolumn"> </th>
      <th class="cell3"></th>
    </tr>
    <tr>
      <th class="cell4"> </th>
      <th class="cell5">Incoming calls</th>
      <th class="cell5">National calls</th>
      <th class="cell5">Calls to US & Canada</th>
      <th class="cell5">Calls to other Phones</th>
      <th class="cell5">Calls to other Countries</th>
      <th class="cell5 lastcolumn">SMS text messages</th>
      <th class="cell6"> </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="cell7"></td>
      <td class="cell8">Select</td>
      <td class="cell8">country</td>
      <td class="cell8">from</td>
      <td class="cell8">dropdown</td>
      <td class="cell8">list</td>
      <td class="cell8 lastcolumn">above</td>
      <td class="cell9"></td>
    </tr>
    <tr>
      <td class="cell10"></td>
      <td class="cell11"> </td>
      <td class="cell11"> </td>
      <td class="cell11"> </td>
      <td class="cell11"> </td>
      <td class="cell11"> </td>
      <td class="cell11 lastcolumn"> </td>
      <td class="cell12"></td>
    </tr>
  </tbody>
</table>


</body>
</html>

Note: there are some non-breaking spaces that SO strips from the code. Check out the living demo for more info

Enjoy!

回复 原文
~没有更多了~

关于作者

浮生面具三千个

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文