标签: css-tables

我正在努力使用 HTML 表格 + 可滚动正文来获取两个固定列和标题。我进行了很多搜索并发现了这些方法：

• 这（只有 1 个固定列/标题）
• 和这个（只有 1 个固定列/标题；没有表格标记）
• 我还使用一个库创建了自己的解决方案，该解决方案工作正常，但我不喜欢 html 表标记标记变得混乱，而且初始化也不colModal是那么好，因为我有动态数量的列。

由于我对这些解决方案都不满意，我想知道是否有机会仅使用 CSS 来完成这项工作？

与我合作的设计师定期提交设计，其中页面中会有多个表格，通常由段落或中间的其他内容分隔。他更喜欢每个表的列具有相同的宽度。这是一个例子...

Employees
--------------------------------------------------------
| Name                          | Start Date           |
--------------------------------------------------------
| Bill                          | 10/22/1983           |
--------------------------------------------------------
| Jim                           | 04/14/2010           |
--------------------------------------------------------
| Jessica                       | 06/08/2002           |
--------------------------------------------------------

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.

Lunch Menu
--------------------------------------------------------
| Name                          | Price                |
--------------------------------------------------------
| Pizza Slice                   | $2.50                |
--------------------------------------------------------
| Pulled Pork Sandwich          | $5.99                |
--------------------------------------------------------
| Fried Chicken Dinner          | $7.99                |
--------------------------------------------------------

我的希望是找到一个可重用的仅 …

我继承了一个项目，其中有人决定将 a 设置display为tdto flex。这样做的后果之一是，当td行中有其他 s 跨越多行时，tdwithdisplay: flex不会拉伸到其他 s 的高度td。

解决这个问题的正确方法（我认为）是display: flex从 the 中删除td并将其放在内部div，但我目前只有修改 CSS 的权限，所以我想知道是否有任何方法可以用 CSS 修复它仅（同时保留布局，如td下面的代码片段所示）？

编辑：所需的布局是在 内有左侧和右侧td，右侧是span一个彩色点。即使在移动设备上，当颜色点td非常窄并且左侧最终包裹起来时，彩色点也需要始终在右侧和顶部对齐。

table td {
  border: 1px solid black;
}

td.flex {
  display: flex;
  justify-content: space-between;
}

span.right {
  display: inline-block;
  margin-left: 1em;
  width: 1em;
  border-radius: 50%
}

span.red {
  background-color: red;
}

span.green {
  background-color: …

我正在尝试用边框将这张桌子的角变圆。我发现元素本身会变圆（您可以在屏幕截图中的背景颜色中看到这一点），但边框不会按照我预期的方式随元素变圆。

我尝试将边框和舍入应用到每一层（见下文），我明白了。我想这对于表格来说是 CSS 的细微差别，但我就是不明白为什么这只会影响边框而不影响内部元素本身。

     <table
        {...getTableProps()}
        className="text-left bg-purple-500 rounded-full border-2 border-accent"
      >
        <thead className="text-left bg-purple-500 rounded-full border-2 border-accent">
          {headerGroups.map((headerGroup) => (
            <tr
              {...headerGroup.getHeaderGroupProps()}
              className="text-left bg-purple-500 rounded-full border-2 border-accent"
            >
              {headerGroup.headers.map((column) => (
                // Add the sorting props to control sorting. For this example
                // we can add them into the header props
                <th
                  {...column.getHeaderProps(column.getSortByToggleProps())}
                  className="p-4 bg-green-700 rounded-full "
                >
                  {column.render("Header")}
                  {/* Add a sort direction indicator */}
                  <span>
                    {column.isSorted
                      ? column.isSortedDesc
                        ? " "
                        : " "
                      : ""}
                  </span> …

我不是css的专家,所以这有点令人沮丧.我有一个充满转发器的网格.我希望每行在底部有一个1px边框,以便在视觉上分隔行.我还希望桌子两边都有深灰色边框.使用此表的以下CSS:

        #repeaterTable
        {
            border-left: 1px solid #A3A3A3; 
            border-right: 1px solid #A3A3A3;
            border-collapse: collapse;
        }
        repeaterTable.td
        {
            border-bottom: 1px solid white; 

        }

我在FF(表右边缘的SS)中得到这个结果:

alt text http://img251.imageshack.us/img251/9278/borderff.png

这在IE8中:

alt text http://img412.imageshack.us/img412/7092/borderie.png

我需要的是让深灰色边框保持稳定,而不是每个行边界打破.该表中有两列,但cellspacing为0px,因此设置tr上的border-bottom会形成一个连续的边框.任何人都可以建议对css进行一些更改以使其正常工作吗？

我最近注意到我的网站虽然在Firefox中显示得很好但仍然在Chrome中被破坏了.在我的页面上学习了HTML和CSS -

http://www.designlagoon.com/what-we-do/

Chrome中4个蓝色标题下方的差距比Firefox更大 - 这打破了包含框的框架.这似乎与我正在使用的表格布局的填充/边距有关,但我正在努力解决问题.

如果有人能够解释可能导致问题的原因,我真的很感激!

使用css选择器我应该如何编写一个选择器,以便只有具有数据的表行显示游标作为指针.我试过下面但是没有

table tbody tr:not(tr>th)

这是IE6中的跨浏览器和工作事件吗？

我正在研究一个界面,这件事让我烦恼.

请参阅:http://jsfiddle.net/NUKxX/

它适用于Chrome,但不适用于Firefox.Chrome中的基本思想是每列中最长的单词将td或th拉伸到适当的长度以保留空间.但在Firefox中,输入元素似乎完全忽略了最大宽度和最小宽度.

我尝试position:absolute在输入和第二方面摆弄,position:relative但Firefox也忽略了后面提到的.

我如何使其工作？