私は以下のようなものを持っています。ブック名（可変長、Ajaxコールから得られる）、価格、数量テーブルを使用する代わりに、CSSを使用して各フィールドを揃える方法はありますか？ありがとう。テーブルを使用する代わりにCSSを使用して異なるフィールドを配置する
HTML出力：
Emacs Handbook $10 1 Web Development In 10 Days $20 2 Car $8 3
私がしたい：
Emacs Handbook $10 1 Web Development In 10 Days $20 2 Car $8 1
テーブルを使用して問題はありません。表形式のデータ（つまり、スプレッドシートまたはデータベーステーブルのいずれかで期待されるもの）であっても、それは依然としてテーブルに属します。
あなたが主張しなければならない場合は、リスト項目内のスパンでそれらのそれぞれを配置し、それらのスタイルを設定できます。
HTML：
<ul class="productList">
<li>
<span class="title">Emacs Handbook</span>
<span class="price">$50</span>
<span class="qty">3</span
</li>
</ul>
CSS：
.productList span { display:inline-block;}
.productList .title { width:250px;}
.productList .price { width:50px;}
.productList .qty { width: 50px; }
チップのCalvinに感謝します。 – user342673
擬：
最長タイトル長を取得します。 最長価格の長さを取得します。
そして、タイトル、価格、及び長さの各ホルダのCSSを設定するためにJavaScriptを使用して、タイトルの
すべき{左：0PX;}価格{左用
：タイトル長さ+バッファサイズ（10pxの？）}量{左用
：表題長+バッファサイズ+価格長+バッファサイズ}このような
何か：
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<style type="text/css">
.super-container {
margin: 0 auto;
width: 900px;
}
.table {
float: left;
margin-bottom: 0.5em;
text-indent: 0.2em;
padding: 0.1em;
width: 100%;
}
.table-header {
font: bold 1.3em tahoma;
width: 100%;
}
.table-description {
display: block;
font: italic 0.8em tahoma;
text-indent: 0.6em;
width: 100%;
}
.field-header {
font: bold 1em tahoma;
width: 100%;
}
.field-header, .row {
display: block;
float: left;
padding-top: 0.1em;
padding-bottom: 0.1em;
width: 100%;
}
.field-header li, .row li {
display: block;
float: left;
font-size: 1em;
height: 1.4em;
line-height: 1.4em;
}
</style>
</head>
<body><div class="super-container">
<div id="table1" class="table">
<h4 class="table-header" colspan="4">
tbl name
</h4>
<span class="table-description" colspan="4">
this is my tbl description
</span>
<ul class="field-header">
<li id="a">A</li>
<li id="b">B</li>
<li id="c">C</li>
<li id="d">D</li>
</ul>
<ul class="row">
<li id="a"><a href="#">1a</a></li>
<li id="b"><a href="#">1b</a></li>
<li id="c"><a href="#">1c</a></li>
<li id="d"><a href="#">1d</a></li>
</ul>
<ul class="row">
<li id="a"><a href="#">2a</a></li>
<li id="b"><a href="#">2b</a></li>
<li id="c"><a href="#">2c</a></li>
<li id="d"><a href="#">2d</a></li>
</ul>
</div><!-- end table -->
<script type="text/javascript">
$(document).ready(function(){
var widths = {
'a': '20%',
'b': '50%',
'c': '10%',
'd': '10%'
}
setColumnWidths('#table1', "individually", widths);
});
/**
* Set column widths of `tableless` table see above example html
* @param tbl The id of the table as string
* @param how How the function should set the table width as string
* @param widths Key value pairs fieldId: value e.g { 'field1': '10px' }
*/
function setColumnWidths(tbl, how, widths) {
var tblRowElements = $(tbl + ' > ul');
var tblColElements = tblRowElements.children();
var numberOfRows = tblRowElements.length;
var numberOfCols = tblColElements.length/numberOfRows;
switch(how) {
case "evenly":
tblColElements.width((100/numberOfCols + "%"));
break;
case "individually":
var getWidth = function(property) {
return widths[property];
}
tblColElements.each(function(widths){
var elm = $(this);
var elmId = elm.attr('id');
elm.width(getWidth(elmId));
});
break;
default:
alert("unknown how arg passed: " + how
+ "\n reverting to default `evenly`");
setColumnWidths(tbl, "evenly");
break;
}
}
</script>
</div></body>
</html>
あなたはカルバンのHTML使用することができます私はこのような状況でテーブルを使用することについて同意するが、あなたは、CSSを使用したい場合は（と少しjqueryの）：
<ul class="productList">
<li>
<span class="title">Emacs Handbook</span>
<span class="price">$10</span>
<span class="qty">1</span>
</li>
<li>
<span class="title">Web Development In 10 Days</span>
<span class="price">$10</span>
<span class="qty">1</span>
</li>
<li>
<span class="title">Car</span>
<span class="price">$10</span>
<span class="qty">1</span>
</li>
</ul>
とjQueryの少し：
$(document).ready(function(){
$('.title').css('width',getMaxNameWidth());
});
function getMaxNameWidth(){
var maxWidth = 0;
$('.title').each(function(i){
if(this.offsetWidth > maxWidth)
maxWidth = this.offsetWidth;
});
return maxWidth;
}
HTML：：
リストのようなDOMが可能です
<ul class="productList">
<li>
<span class="title">Emacs Handbook</span>
<span class="price">$50</span>
<span class="qty">3</span
</li>
</ul>
CSS：
ul.productList { display: table; }
.productList > li { display: table-row; }
.productList > li > * { display: table-cell; }
しかし、細胞を区別するために、リスト要素とさえスパンを使用する必要はありません。表形式のデータがあるので、古いブラウザではCSSの問題を起こさない表要素を使用する必要があります。意味タグを既に持っている場合にのみ、そのソリューションを使用します。ラベルと入力のリスト。
なぜあなたはそれをしたいですか？データを表形式で表示する必要がある場合は、表を使用します。これがその表形式です。 – Oded
はい、方法はありますが、それは*表データです – zzzzBov
これはレイアウトに関連していますか？私はレイアウトの目的のためにテーブルを使用しないようにしようとしています。 – user342673