对齐和格式化动态添加到表格行的多个元素答案

【问题标题】：Align and Format Multiple Elements Dynamically Added to Table Row对齐和格式化动态添加到表格行的多个元素
【发布时间】：2013-12-11 10:20:21
【问题描述】：

我正在尝试制作一个greasemonkey 用户脚本，通过ajax 请求将一个div 添加到一个表中。该表重复此模式大约 700 次：

<table id="table01" >
<tr class = "row0"> 
    <td rowspan = "2" >
        <img src = "url" >
    </td>
    <td> text1 </td>
    <td style = "text-align: right;" > text2 </td>
</tr>
<tr class = "row1">
    <td> text3 </td>
    <td style = "text-align: right;" > text4 </td>
</tr>

...
...
...

</table>

我无法插入 div 并设置 css 对齐以使其看起来像图像中的样子： http://s24.postimg.org/wastsl5it/Sin_t_tulo.png 如何使用 javascript 或 jquery 来完成？

提前致谢

【问题讨论】：

标签： javascript jquery css html alignment

【解决方案1】：

在此处查看输出：

jsFiddle

我的解决方案是使用百分比。页面宽度为 100%。当元素达到 100% 时，它将强制下一个元素环绕到下面的位置。并使用float，而不是text-align: right。我将所有内容都设置为float:left，并设置width，这样元素就会环绕到下一行。

<table id="table01" >
<tr class = "row0"> 
    <div style="width:20%; float:left; border: solid thin purple">
            <img src = "url" >
    </div>

    <div style="width:79%; float:left">
        <div style="width:49%; float:left; border: solid thin"> text1 </div>
        <div style = "width: 49%; float:left; border: solid thin red"> text2 </div>

        <div style="width: 98%; float:left; border: solid thin blue">Center</div>

        <div style = "width: 48%; float:left; border: solid thin green"> text3 </div>
        <div style = "width: 48%; float:left; border: solid thin orange"> text4 </div>
    </div>
</tr>

<tr class = "row0"> 
    <div style="width:20%; float:left">
            <img src = "url" >
    </div>

    <div style="width:80%; float:left">
        <div style="width:50%; float:left"> text1 </div>
        <div style = "width: 50%; float:left" > text2 </div>

        <div style="width: 100%">Center</div>

        <div style = "width: 50%; float:left"> text3 </div>
        <div style = "width: 50%; float:left"> text4 </div>
    </div>
</tr>

</table>

请注意，您遇到问题的 <div> 设置为 100% 的宽度。所以它将占据它的所有部分。另外，请注意将<div> 设置为 100% 的百分比确实 NOT 占据了 100% 的页面。它占用了它所在的 <div> 的 100%。这是你需要知道的另一件事。宽度与它们所在的元素相关。

添加边框后，您可以实际看到所有内容的布局，宽度需要更小，因为边框占用空间。因此，添加边框的 100% 宽度大于 100%。所以你必须把宽度改小一些，可能是 99%。

【讨论】：