반응형
td 내부의 HTML 테이블 tr
HTML로 표를 만들려고합니다. 다음과 같은 디자인을 만들었습니다. <tr>내부를 추가 <td>했지만 어떻게 든 디자인에 따라 테이블이 만들어지지 않았습니다.
누구든지 내가 이것을 달성 할 수있는 방법을 제안 할 수 있습니까?
Name1을 만들 수 없습니다. | 가격 1 섹션.
td 안에 전체 테이블을 추가해야합니다.
<table>
<tr>
<td>
<table>
<tr>
<td>
...
</td>
</tr>
</table>
</td>
</tr>
</table>tr을 td 안에 넣을 수 없습니다. 에 대한 MDN 웹 문서 문서 에서 허용 된 콘텐츠를 볼 수 있습니다 td. 관련 정보는 허용 된 콘텐츠 섹션에 있습니다.
이것을 달성하는 또 다른 방법은 사용하는 것입니다 colspan및 rowspan. 이 바이올린을 확인하십시오 .
HTML :
<table width="100%">
<tr>
<td>Name 1</td>
<td>Name 2</td>
<td colspan="2">Name 3</td>
<td>Name 4</td>
</tr>
<tr>
<td rowspan="3">ITEM 1</td>
<td rowspan="3">ITEM 2</td>
<td>name1</td>
<td>price1</td>
<td rowspan="3">ITEM 4</td>
</tr>
<tr>
<td>name2</td>
<td>price2</td>
</tr>
<tr>
<td>name3</td>
<td>price3/td>
</tr>
</table>
그리고 일부 CSS :
table {
border-collapse: collapse
}
td {
border: 1px solid #000000
}
테이블을 중첩하지 않고도 해결할 수 있습니다.
<table border="1">
<thead>
<tr>
<th>ABC</th>
<th>ABC</th>
<th colspan="2">ABC</th>
<th>ABC</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">Item1</td>
<td rowspan="4">Item1</td>
<td colspan="2">Item1</td>
<td rowspan="4">Item1</td>
</tr>
<tr>
<td>Name1</td>
<td>Price1</td>
</tr>
<tr>
<td>Name2</td>
<td>Price2</td>
</tr>
<tr>
<td>Name3</td>
<td>Price3</td>
</tr>
<tr>
<td>Item2</td>
<td>Item2</td>
<td colspan="2">Item2</td>
<td>Item2</td>
</tr>
</tbody>
</table>이 코드 시도
<table border="1" width="100%">
<tr>
<td>Name 1</td>
<td>Name 2</td>
<td colspan="2">Name 3</td>
<td>Name 4</td>
</tr>
<tr>
<td rowspan="3">ITEM 1</td>
<td rowspan="3">ITEM 2</td>
<td>name</td>
<td>price</td>
<td rowspan="3">ITEM 4</td>
</tr>
<tr>
<td>name</td>
<td>price</td>
</tr>
<tr>
<td>name</td>
<td>price</td>
</tr>
</table>
같은 TD 요소 내에 다른 테이블을 넣어 이 .
<table>
<tr>
...
</tr>
<tr>
<td>ABC</td>
<td>ABC</td>
<td>
<table>
<tr>
<td>name1</td>
<td>price1</td>
</tr>
...
</table>
</td>
<td>ABC</td>
</tr>
...
</table>
전체 예 :
<table border="1" style="width:100%;">
<tr>
<td>ABC</td>
<td>ABC</td>
<td>ABC</td>
<td>ABC</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 1</td>
<td><table border="1" style="width: 100%;">
<tr><td>Name 1</td><td>Price 1</td></tr>
<tr><td>Name 2</td><td>Price 2</td></tr>
<tr><td>Name 3</td><td>Price 3</td></tr>
</table></td>
<td>Item 1</td>
</tr>
<tr>
<td>Item 2</td>
<td>Item 2</td>
<td>Item 2</td>
<td>Item 2</td>
</tr>
<tr>
<td>Item 3</td>
<td>Item 3</td>
<td>Item 3</td>
<td>Item 3</td>
</tr>
</table>
원하는에 새 table를 추가하기 만하면 td됩니다. 예 : http://jsfiddle.net/AbE3Q/
<table border="1">
<tr>
<td>ABC</td>
<td>ABC</td>
<td>ABC</td>
<td>ABC</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td><table border="1">
<tr><td>qweqwewe</td><td>qweqwewe</td></tr>
<tr><td>qweqwewe</td><td>qweqwewe</td></tr>
<tr><td>qweqwewe</td><td>qweqwewe</td></tr>
</table></td>
<td>Item3</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
이것을 확인할 수 있습니다. 이렇게 테이블 내부의 테이블을 사용하십시오.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>ABC</th>
<th>ABC</th>
<th>ABC</th>
<th>ABC</th>
</tr>
<tr>
<td>Item1</td>
<td>Item1</td>
<td>
<table style="width:100%">
<tr>
<td>name1</td>
<td>price1</td>
</tr>
<tr>
<td>name2</td>
<td>price2</td>
</tr>
<tr>
<td>name3</td>
<td>price3</td>
</tr>
</table>
</td>
<td>item1</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
<tr>
<td>E</td>
<td>R</td>
<td>T</td>
<td>T</td>
</tr>
</table>
</body>
</html>
<table border="1px;" width="100%" >
<tr align="center">
<td>Product</td>
<td>quantity</td>
<td>Price</td>
<td>Totall</td>
</tr>
<tr align="center">
<td>Item-1</td>
<td>Item-1</td>
<td>
<table border="1px;" width="100%">
<tr align="center">
<td>Name1</td>
<td>Price1</td>
</tr>
<tr align="center">
<td>Name2</td>
<td>Price2</td>
</tr>
<tr align="center">
<td>Name3</td>
<td>Price3</td>
</tr>
<tr>
<td>Name4</td>
<td>Price4</td>
</tr>
</table>
</td>
<td>Item-1</td>
</tr>
<tr align="center">
<td>Item-2</td>
<td>Item-2</td>
<td>Item-2</td>
<td>Item-2</td>
</tr>
<tr align="center">
<td>Item-3</td>
<td>Item-3</td>
<td>Item-3</td>
<td>Item-3</td>
</tr>
</table>
참고 URL : https://stackoverflow.com/questions/17088868/html-table-tr-inside-td
반응형
'developer tip' 카테고리의 다른 글
| Python- "OpenGL.error"로거에 대한 처리기를 찾을 수 없습니다. (0) | 2020.10.09 |
|---|---|
| HTTP를 통해 원격 서버에서 이미지 복사 (0) | 2020.10.09 |
| C #에 대한 주석 상속 (실제로 모든 언어) (0) | 2020.10.09 |
| 실제 프로젝트에서 비트 시프 팅을 사용해야했던 적이 있습니까? (0) | 2020.10.09 |
| MySQL / Amazon RDS 오류 : "SUPER 권한이 없습니다…" (0) | 2020.10.09 |