테이블에 대각선 넣은 html 작성하기

테이블내에 대각선을 적용하는데 자꾸 대각선 외에 다른 선이 하나 더 추가 되어 나왔다.

위 테이블을 표현하는 html는 아래와 같다. 

 

<table style="border-collapse: collapse; border-color: black;" border="1" data-ke-align="alignLeft">
<tbody>
<tr>
<td class="width-165" style="width: 227px; border: 1px solid black; position: relative;" height="45">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;손실횟수(빈도) <br />손실규모(심도)
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-top: 1px solid black; border-left: 1px solid black; transform: rotate(15deg); transform-origin: top left;">&nbsp;</div>
</td>
<td style="text-align: center; width: 212px; border: 1px solid black;">많음(多)</td>
<td style="text-align: center; width: 207px; border: 1px solid black;">적음(少)</td>
</tr>
<tr>
<td style="text-align: center; width: 227px; border: 1px solid black;" height="22">큼(大)</td>
<td style="text-align: center; width: 212px; border: 1px solid black;">①</td>
<td style="text-align: center; width: 207px; border: 1px solid black;">②</td>
</tr>
<tr>
<td style="text-align: center; width: 227px; border: 1px solid black;" height="22">작음(小)</td>
<td style="text-align: center; width: 212px; border: 1px solid black;">③</td>
<td style="text-align: center; width: 207px; border: 1px solid black;">④</td>
</tr>
</tbody>
</table>

 

챗GPT에게 대각선 넣어 달라고 했더니 저렇게 되었다. 대각선외에 다른 선이 있다는 걸 챗GPT에게 이해 시킬수가 없었다. 아무리 이것은 뭐냐 저것은 뭐냐 왜 이렇게 HTML는 표현했냐 .. 장 시간 대화(?)를 주고 받았지만 문제를 해결할 수 없었다.

 

 

그런데 마지막 대화에서 위와 같이 말했다.

그래서 그 boder-left란 표현을 없애버리기로 했다.

챗GPT는 없애면 대각선이 없어진다고 했다.

boder-left를 지웠더니 위와 같이 정상적으로 대각선이 그어졌다. 야호~~~~~

 

완성된 html는 아래와 같다

 

<table style="border-collapse: collapse; border-color: black;" border="1" data-ke-align="alignLeft">
<tbody>
<tr>
<td class="width-165" style="width: 227px; border: 1px solid black; position: relative;" height="45">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;손실횟수(빈도) <br />손실규모(심도)
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-top: 1px solid black; 1px solid black; transform: rotate(14deg); transform-origin: top left;">&nbsp;</div>
</td>
<td style="text-align: center; width: 212px; border: 1px solid black;">많음(多)</td>
<td style="text-align: center; width: 207px; border: 1px solid black;">적음(少)</td>
</tr>
<tr>
<td style="text-align: center; width: 227px; border: 1px solid black;" height="22">큼(大)</td>
<td style="text-align: center; width: 212px; border: 1px solid black;">①</td>
<td style="text-align: center; width: 207px; border: 1px solid black;">②</td>
</tr>
<tr>
<td style="text-align: center; width: 227px; border: 1px solid black;" height="22">작음(小)</td>
<td style="text-align: center; width: 212px; border: 1px solid black;">③</td>
<td style="text-align: center; width: 207px; border: 1px solid black;">④</td>
</tr>
</tbody>
</table>

---

챗GPT 101 - 경영일반 | 쿠팡

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."