PHP/HTML - 표 너비

Question

HTML과 PHP를 사용하여 웹 페이지를 만들고 있습니다. 아래, 나는 나의 문제의 그림을 첨부한다.

내 첫 번째 문제는 내가 테이블에 원하는 형식으로 제공 할 수 없다는 것입니다 :

이

• I 콘텐츠 컬럼에 조정하고 싶습니다를 1, 2, 3, 4
• 열 5 (마지막 열)는 더 많은 공간이 있어야합니다.
• 마지막 열의 aaaaaaaaaaaaaaaa은 테이블을 벗어나서는 안됩니다. 열 끝 부분에 도달 할 때 분할되거나 줄 바꿈으로 분리되어야합니다. 여기

내 코드의 조각 :

echo "<table><tr>"; 
echo '<td width="40">ID</th>'; 
echo '<td width="50">Organism</th>'; 
echo '<td width="50">Chromosome</th>'; 
echo '<td width="50">Gene name</th>'; 
echo '<td>Sequence</th>'; 
echo "</tr>"; 
while($row = mysqli_fetch_array($result2)) { 
    echo "<tr>"; 
    echo "<td>$row[id_send]</td>"; 
    echo "<td>$row[organism]</td>"; 
    echo "<td>$row[chromosome]</td>"; 
    echo "<td>$row[gene]<br></td>"; 
    echo "<td>$row[sequence]</td>"; 
    echo "</tr>"; 
} 
echo "</table>"; 

Answer 1

당신은 테이블이 CSS를 사용할 수 있습니다.

그러나 "break-word"는 단어를 분리하고 다음 줄로 감싸므로 텍스트를 읽을 수 없게 만들 수 있습니다.

Answer 2

.table { 
    margin-bottom: 30px; 
    border-top: 1px solid #aaa; 
    border-left: 1px solid #aaa; 
    border-right: 1px solid #ccc; 
    border-bottom: 1px solid #ccc; 
} 
.tableHeading { 
    font-size: 18px; 
    font-weight: bold; 
    text-transform: capitalize; 
    color: #000000; 
    padding: 5px; 
    background: url('/images/table-2-head-bg.gif'); 
    background-repeat: repeat-x; 
    background-color: #f7f7f7; 
    border-top: 1px solid #fff; 
    border-left: 1px solid #fff; 
    border-bottom: 1px solid #aaa; 
    border-right: 1px solid #aaa; 
} 
.tableSubHeading { 
    padding: 5px; 
    color: #666666; 
    border-top: 1px solid #fff; 
    border-left: 1px solid #fff; 
    border-bottom: 1px solid #aaa; 
    border-right: 1px solid #aaa; 
} 
.tableMassActionCell { 
    padding-top: 10px; 
    padding-left: 10px; 
    font-size: 12px; 
    font-weight: bold; 
    background-color: #f7f7f7; 
    border-top: 1px solid #fff; 
    border-left: 1px solid #fff; 
    border-bottom: 1px solid #aaa; 
    border-right: 1px solid #aaa; 
} 
.tableColumnHeader { 
    font-weight: bold; 
    font-size: 12px; 
    background-color: #EEEEEE; 
    padding: 5px; 
    border-top: 2px solid #fff; 
    border-left: 2px solid #fff; 
    border-bottom: 1px solid #aaa; 
    border-right: 1px solid #aaa; 
} 
.tableRowNoResults { 
    font-weight: bold; 
    background-color: #ffccff; 
    text-align: center; 
    padding: 10px; 
    border-top: 1px solid #fff; 
    border-left: 1px solid #fff; 
    border-bottom: 1px solid #aaa; 
    border-right: 1px solid #aaa; 
} 
.tableRowLeft1 { 
    font-weight: bold; 
    background-color: #f7f7f7; 
    padding: 5px; 
    border-top: 1px solid #fff; 
    border-left: 1px solid #fff; 
    border-bottom: 1px solid #aaa; 
    border-right: 1px solid #aaa; 
} 
.tableRowRight1 { 
    padding: 5px; 
    background-color: #f7f7f7; 
    border-top: 1px solid #fff; 
    border-left: 1px solid #fff; 
    border-bottom: 1px solid #aaa; 
    border-right: 1px solid #aaa; 
} 
.tableRowLeft2 { 
    font-weight: bold; 
    background-color: #ffffff; 
    padding: 5px; 
    border-top: 1px solid #eee; 
    border-left: 1px solid #eee; 
    border-bottom: 1px solid #aaa; 
    border-right: 1px solid #aaa; 
} 
.tableRowRight2 { 
    padding: 5px; 
    background-color: #ffffff; 
    border-top: 1px solid #eee; 
    border-left: 1px solid #eee; 
    border-bottom: 1px solid #aaa; 
    border-right: 1px solid #aaa; 
} 
.tableSubmitCell { 
    background-color: #EEEEEE; 
    padding: 5px; 
    border-top: 2px solid #fff; 
    border-left: 2px solid #fff; 
    border-bottom: 1px solid #aaa; 
    border-right: 1px solid #aaa; 
    text-align: right; 
}