次の表があります。
#content table
{
width: 800px;
table-layout: fixed;
}
#content table thead
{
font-weight: bold;
}
#content table thead td
{
padding: 0;
vertical-align: bottom;
cursor: pointer;
border-bottom: 2px solid #427AA8;
padding-right: 5px;
}
#content table thead td.sorttable_nosort
{
cursor: default;
}
#content table thead td span
{
display: inline-block;
}
#content table:not(.widthSet) thead td:last-child span
{
width: 100%;
}
#content table tbody
{
font-size: 90%;
}
#content table tbody tr
{
border-top: 1px solid #AAA;
vertical-align: middle;
}
#content table tbody tr .status
{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #777;
margin-right: 5px;
line-height: 2em;
vertical-align: middle;
position: relative;
bottom: 1px;
}
.ie7_html #content table tbody tr .state
{
*display:inline;
*position: static;
zoom: 1;
}
#content table tbody tr .generating, #content table tbody tr .info
{
background-color: #3399FF;
}
#content table tbody tr .templatemoderation, #content table tbody tr .moderating
{
background-color: #0044FF;
}
#content table tbody tr .contentmoderation
{
background-color: #FF9900;
}
#content table tbody tr .pending, #content table tbody tr .warn, #content table tbody tr .uploaded
{
background-color: #FF5500;
}
#content table tbody tr .printing
{
background-color: #FFFF00;
}
#content table tbody tr .failed, #content table tbody tr .rejected, #content table tbody tr .error
{
background-color: #DD0000;
}
#content table tbody tr .printed, #content table tbody tr .accepted, #content table tbody tr .processed
{
background-color: #00AA00;
}
#content table tbody tr .deleted
{
background-color: #404040;
}
#content table tbody tr .archived
{
background-color: #CCCCCC;
}
#content table tbody tr:first-child
{
border: none;
}
#content table tbody tr:nth-child(even)
{
background: #DDD;
}
#content table tbody tr.selected, #content table tbody tr.selectable:hover
{
background-color: #FFFFDD;
cursor: pointer;
}
#content table tbody td
{
padding: 5px;
vertical-align: top;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3em;
}
#content table tbody td a
{
color: #38688F;
margin-bottom: 3px !important;
}
#content table tbody td a:hover
{
color: #729CBE;
text-decoration: underline;
}
#content table tbody td pre
{
overflow: auto;
max-height: 200px;
background-color: #EEE;
border: 1px solid #AAA;
padding: 3px;
}
#content table tbody td input[type="checkbox"]
{
position: relative;
top: 1px;
}
#content table tbody td .tablebtn
{
font-size: 90%;
margin: 0;
padding: 0 8px;
height: 20px;
line-height: 20px;
display: inline-block;
}
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org">
<title></title>
</head>
<body id="content">
<table id="downloads" class="sortable">
<colgroup>
<col span="1" style="width: 28px;">
<col span="1">
<col span="1" style="width: 85px;">
<col span="1" style="width: 110px;">
<col span="1" style="width: 110px;">
<col span="1">
<col span="1" style="width: 110px;">
<col span="1" style="width: 110px;">
<col span="1" style="width: 78px;">
</colgroup>
<thead>
<tr>
<td class="sorttable_nosort"><span><input title="Select All" type="checkbox" id=
"tableSelectAll" style="margin-left: 5px; display: none;"> </span></td>
<td><span title="Click to Sort">Student Name</span></td>
<td><span title="Click to Sort">Student Number</span></td>
<td><span title="Click to Sort">Type</span></td>
<td><span title="Click to Sort">Qualification</span></td>
<td><span title="Click to Sort">Centre</span></td>
<td><span title="Click to Sort">PO Number</span></td>
<td><span title="Click to Sort">Print Status</span></td>
<td class="sorttable_nosort"><span> </span></td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="downloads" value=
"097a9836-ab93-4844-b971-a0ed0120d7df"></td>
<td>MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW
MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW</td>
<td>EFS1774</td>
<td>Full Certificate</td>
<td>8345-17</td>
<td>Some company name</td>
<td>4684546513</td>
<td>
<div class="status pending">
</div>Pending
</td>
<td><a class="button gradient tablebtn">Preview</a></td>
</tr>
<tr>
<td><input type="checkbox" name="downloads" value=
"c7d07d05-cfe9-4e81-984c-a0ed0120d7fb"></td>
<td>MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW
MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW</td>
<td>EFS1774</td>
<td>Full Certificate</td>
<td>8274-21</td>
<td>Some company name</td>
<td>4684546513</td>
<td>
<div class="status pending">
</div>Pending
</td>
<td><a class="button gradient tablebtn">Preview</a></td>
</tr>
<tr>
<td><input type="checkbox" name="downloads" value=
"4810ac9f-20f5-4f39-af83-a0ed0120d817"></td>
<td>MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW
MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW</td>
<td>EFS1774</td>
<td>CUC</td>
<td>8274-20</td>
<td>Some company name</td>
<td>4684546513</td>
<td>
<div class="status pending">
</div>Pending
</td>
<td><a class="button gradient tablebtn">Preview</a></td>
</tr>
<tr>
<td><input type="checkbox" name="downloads" value=
"9d8d8acc-4f6b-446a-aa6b-a0ed0120d838"></td>
<td>MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW
MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW</td>
<td>EFS1774</td>
<td>CUC</td>
<td>8287-30</td>
<td>Some company name</td>
<td>4684546513</td>
<td>
<div class="status pending">
</div>Pending
</td>
<td><a class="button gradient tablebtn">Preview</a></td>
</tr>
<tr>
<td><input type="checkbox" name="downloads" value=
"d0224b8b-bbff-4d62-a901-a0ed0120d861"></td>
<td>MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW
MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW</td>
<td>EFS1774</td>
<td>CUC</td>
<td>8351-50</td>
<td>Some company name</td>
<td>4684546513</td>
<td>
<div class="status pending">
</div>Pending
</td>
<td><a class="button gradient tablebtn">Preview</a></td>
</tr>
<tr>
<td><input type="checkbox" name="downloads" value=
"cfe6080a-f0ee-434c-ac14-a0ed0120d8cb"></td>
<td>MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW
MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW</td>
<td>EFS1774</td>
<td>Full Certificate</td>
<td>8287-35</td>
<td>Some company name</td>
<td>4684546513</td>
<td>
<div class="status pending">
</div>Pending
</td>
<td><a class="button gradient tablebtn">Preview</a></td>
</tr>
<tr>
<td><input type="checkbox" name="downloads" value=
"c7b2ff75-0c01-40ed-adaf-a0ed0120d8dd"></td>
<td>MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW
MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW</td>
<td>EFS1774</td>
<td>NCR</td>
<td></td>
<td>Some company name</td>
<td>4684546513</td>
<td>
<div class="status pending">
</div>Pending
</td>
<td><a class="button gradient tablebtn">Preview</a></td>
</tr>
</tbody>
</table>
</body>
</html>
幅を設定するために使用<colgroup>
し、例のように少し長すぎるデータを取得するまでうまく機能します。
問題はそれほど悪くはありませんが、text-overflow
学生名のような列に何らかの方法で (可能であれば) 適用できるとよいでしょう。
スタイルに設定してみましたcol
が、喜びはありません。また、すべてに適用して<td>
も何もしません。私はそれを間違ってアプローチしているだけだと思います。