我正在尝试对齐表格中的文本。目前看起来像这样:
我想将图 block (粗体)居中对齐。此外，我正在尝试将右侧的值移至左侧。
目前我有:
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，对齐 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>
关于javascript - HTML/CSS/Javascript - 对齐表格中的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19675063/