标签: css-tables

在CSS中,您可以使用表的border-spacing属性指定表格单元格之间的间距.

然而,这导致列和行之间的间隔均匀,并且我发现更多情况,我正在使用的设计调用行之间的间隙,而不是列,或反之亦然.

如果我有一个坚实的背景,我可以使用与背景颜色相同的颜色来模拟间距.

我还可以创建一个div(例如)每个表格单元格的第一个子节点,并使用填充或边距来获得所需的结果,但这是为了适应该样式而进行的大量额外标记.

鉴于我显示的数据是表格数据,是否有一种明智的方法来使用表格来实现这种风格？

我喜欢得到<ul><li>一个很好的桌子,我会用CSS来设计.

我喜欢用jQuery进行的转换

* Place|Name|Earning
* 1|Paul|200$
* 2|Joe|400$
* 3|James|100$
* 4|Carl|1000$

......等等......

用<ul>表格单元格的第一行和其他表格制作一个表头...

<ul>页面上可能有4-5 秒.

要为蛋糕添加糖霜,请将其从最大的收入者分类到最小的收入者!

我发现了这个问题:

如何使用JQuery将HTML表转换为列表？

恰恰相反......但也许是一个好的开始？我不知道,我会检查出来......但仍然把问题广泛开放.

我发现了这个问题:

如何使用JQuery将HTML表转换为列表？

恰恰相反......但也许是一个好的开始？我不知道,我会检查出来......但仍然把问题广泛开放.

另一个与解决方案有关的问题......

如果我想"删除"并将其替换为表格..

我不想做一张空桌子..

这里是代码...也许不是"优化"但它起作用

$('#texte').append('<div id="where_my_table_goes"></div>');
$('#where_my_table_goes').append(table);
$('#my_oddly_formatted_list').remove();

什么更好？

不,不,因为问题/答案变得很好,插件很棒......但是不再适用了......

这是错误...我喜欢在点击事件切换时调用插件(tablerize)并通过表替换整个UL ...它不做

这是一小段代码:

<script type="text/javascript">
    $(document).ready(function() {

        $('#texte > h1').next().hide(500);  
        $('#texte > h1').click(function() {
        $(this > ul).tablerize();
        $(this).toggle(500);
        });
    });
</script>

这并不奇怪它不起作用..我确定了一些东西...而且我没有运气来调整插件!...

我真的很想保留这些代码:

$("texte").append('<div id="where_my_table_goes"></div>');
$(#where_my_table_goes"></div>').append(table);
$('#my_oddly_formatted_list').remove();

可以成为:

remove the ul
append the div to (this)
put the table into that div …

我正在寻找一个解决方案,在表的每一行之间但不在列之间有单元间距.这可能吗？

是否可以水平对齐表行？

大多数人会说： “如果希望单元格水平对齐，为什么要开始新的一行？”

我的回答： “我无法控制表的结构。我只是不能，好吗？”

码：

tr {
    display: inline;
}

在FireFox中看起来不错，但是Internet Explorer 7垂直对齐行。我宁愿不使用JavaScript。

编辑：在您开始JavaScript黑客攻击之前，我已经想出了类似的方法：

String.prototype.replace.call(table.innerHTML,/<\/tr>.*<tr>/,"")

我有一个div，其中包含一个table。一切工作，我想，除了我不知道如何设置width的div，这样它的增长作为width了的table它的增长里面。我怎样才能做到这一点？谢谢。

这是的CSS代码div：

#events-table-wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    margin-top: 100px;
    border: 1px solid #CCC;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

设置width为auto无济于事。顺便说一句，我没有更改CSS表中的任何内容。

编辑：这是一个实时版本：http : //jsfiddle.net/ZDF2U/

从这个演示中可以看出,其中一个表设置有圆角(特别是右上角和左下角),这些角被其包含的单元格的背景颜色破坏.

我尝试将一些应用padding到桌面上,但这没有帮助.我唯一的选择是添加额外的列和行并将其设置background-color为transparent？

如何使用CSS修复此问题(没有添加图片或javascript)？

我想从某一列开始添加某种背景颜色.而不是必须为每列使用css类,我宁愿在可能的情况下这样做.

我将有一个包含数百行和大约25列的大表,我更喜欢避免不必要的代码.

目前,我正在使用td:nth-of-type财产来做到这一点:

.demo tr.selectedRow td:nth-of-type(9),
.demo tr.selectedRow td:nth-of-type(10),
.demo tr.selectedRow td:nth-of-type(11),
.demo tr.selectedRow td:nth-of-type(12),
.demo tr.selectedRow td:nth-of-type(13),
.demo tr.selectedRow td:nth-of-type(14),
.demo tr.selectedRow td:nth-of-type(15),
.demo tr.selectedRow td:nth-of-type(16) {
  background-color: #fff16b;
}

我想知道是否有任何方法可以减少这一点.

文档没有多说......

我希望每个单元格之间有4个左右的像素空间.我希望灰色标题有空格而不是灰色块.我试过玩游戏(background-clip:padding-box; padding:14px; margin等),但无法弄清楚如何在div表格中的单元格之间放置几个像素.我该怎么做呢？

演示问题http://jsfiddle.net/EJBnm/

<div class="TableBox">
    <div>
        <div>Head</div> <div>Bigger Head</div> <div>Medium</div>
    </div>
    <div>
        <div>First</div> <div>Second</div> <div>Third</div>
    </div>
    <div>
        <div>First</div> <div>Second</div> <div>Third</div>
    </div>
    <div>
        <div>First</div> <div>Second</div> <div>Third</div>
    </div>
</div>

CSS:

.TableBox {display: table;}
.TableBox > div {display: table-row; border-spacing: 5px}
.TableBox > div >div {display: table-cell;  margin: 4px;}
.TableBox > div:nth-child(even){ color: red; }
.TableBox > div:nth-child(1){  background-color: #666666; color:white; border-spacing: 15px; background-clip:padding-box; padding: 14px; margin:0 20px}

我有横向新闻,看起来像这样: DEMO

如果你在Firefox中运行这个小提琴,它在其他浏览器中显示不同.在我的网页上,它定位随机位置(始终相同).

我必须使用,position: absolute;因为我想在所有列中将日期和按钮保持在同一级别.

我谷歌它但所有解决方案对我不起作用.

所以我的问题是如何定位看起来像DEMO.

我正在尝试采用类似于表格的布局，药物名称显示在左侧，数据占据了表格的其余部分。简单的说：

           +-------------+------------+
medicine 1 |  some data  | some data  |
           +-------------+------------+
medicine 2 |  some data  | some data  |
           +-------------+------------+

由于我想保持数据网格的动态性，因此我<div>将样式display:table-cell为2的两个容器用作两个容器，左边的一个用于所有药物名称，右边的​​一个用于数据网格。<div>在这两个表格单元中有多个内部单元<div>，但是我不确定为什么当我使用Chrome inspect接口进行调查时，左侧的单元顶部为何有较大的填充区域（请参见下图）：

我不太确定哪一部分出错了，并且inspect接口没有给我看似相关的信息。我想学习如何处理这种情况。这是供您参考的html代码：

           +-------------+------------+
medicine 1 |  some data  | some data  |
           +-------------+------------+
medicine 2 |  some data  | some data  |
           +-------------+------------+