0

テーブル内のテキストを揃えようとしています。現在、次のようになっています。

タイル（太字）を中央に揃えたいと思います。また、左側に移動して右側の値を取得しようとしています。

現在私は持っています：

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>

ここで私が間違っていることを誰かが知っていますか？

4

3 に答える 3

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>
于 2013-10-30T06:17:07.177 に答える
0

CSS

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

する必要があります

.tables { width: 400px; ...

両方のセルを同じにするには:

.tables td { width: 50%; }

Javascript

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

これは 1 つのセルだけです。2 つのようにします。

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


jsフィドル

于 2013-10-30T06:19:17.220 に答える
0

これがプレーンな html の場合、ヘッダー<th>を of にすることもできますcolspan=2。同様にヘッダーを作成します

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

これが役立つことを願っています。

于 2013-10-30T06:26:56.863 に答える