【问题标题】：HTML/CSS/Javascript - Align Text In TableHTML/CSS/Javascript - 对齐表格中的文本
【发布时间】：2013-11-09 14:27:09
【问题描述】：

我正在尝试对齐表格中的文本。目前看起来是这样的：

我想将图块（粗体）居中对齐。另外，我正在尝试将右侧的值移到左侧。

目前我有：

Javascript：

var table = $('<table/>',
    {
        id: 'table',
        "class":'tables'

    });

// ************************ Row 1 ************************************
row1 = $('<tr></tr>');
var head = $('<th></th>').addClass('dealHead').text(value.dealTitle);
row1.append(head);
table.append(row1);
// ********************************************************************

// ************************ Row 2 ************************************
row2 = $('<tr></tr>');
var col1 = $('<td></td>').addClass('name').text("Name: ");
var col2 = $('<td></td>').addClass('nameValue').text(value.name);

row2.append(col1);
row2.append(col2);                  
table.append(row2);
// ********************************************************************

// ************************ Row 3 ************************************
row3 = $('<tr></tr>');
col1 = $('<td></td>').addClass('address').text("Address: ");
col2 = $('<td></td>').addClass('addressValue').text(value.address);

row3.append(col1);
row3.append(col2);                  
table.append(row3);

// ********************************************************************

table.appendTo('body')

CSS：

body
{
background-color:#5CD65C;
}

.dealHead
{
text-align:center;
}


.name
{
border-top:thick double #0F0F00;
border-left:thick double #0F0F00;
border-bottom:thick double #0F0F00;

}

.nameValue
{

border-top:thick double #0F0F00;
border-right:thick double #0F0F00;
border-bottom:thick double #0F0F00;
text-align:left;

}

.address
{
border-top:thick double #0F0F00;
border-left:thick double #0F0F00;
border-bottom:thick double #0F0F00;
}

.addressValue
{

border-top:thick double #0F0F00;
border-right:thick double #0F0F00;
border-bottom:thick double #0F0F00;
text-align:left;
}


.tables
{
width="400";
border-collapse: collapse;

}

HTML

几乎是空的<body>

有人知道我在这里做错了什么吗？

【问题讨论】：

为了使您添加 colspan=2 的标题居中

标签： javascript html css html-table alignment

【解决方案1】：

为了使你添加 colspan=2 的标题居中，对齐 td 你有一个类，所以像这样添加 text-align-left

row1 = $('<tr></tr>');
var head = $('<th colspan="2"></th>').addClass('dealHead').text(value.dealTitle);

CSS

.test td {
    text-align: right;
}

示例 HTML

<table class="test">
<tr>
<th colspan="2">Title</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</table>

【讨论】：

这是最好的办法，想不出别的办法了。

【解决方案2】：

CSS

.tables { width="400"; ...

应该是

.tables { width: 400px; ...

为了使两个单元格相同：

.tables td { width: 50%; }

Javascript

var head = $('<th></th>').addClass('dealHead').text(value.dealTitle);

这只是一个单元格，把它变成两个：

var head = $('<th colspan="2"></th>').addClass('dealHead').text(value.dealTitle);

jsFiddle

【讨论】：

谢谢！还利用了width 属性。

【解决方案3】：

如果这是纯 html，我可以将标题 <th> 设为 colspan=2。同样制作你的标题

var head = $('<th colspan="2"></th>').addClass('dealHead').text(value.dealTitle);

希望这会有所帮助。

【讨论】：