응답 성이 좋아지기 위해 테이블을 깨는 데 문제가 있습니다. 이 사진을보고, css으로 그 방법을 알려주세요.미디어 쿼리를 사용하여 테이블을 나누는 방법은 무엇입니까?
당신은 화면을 재설정하고 플렉스 모델을 사용할 수 있습니다 : 당신이 일해야 할 때마다
/* break table */
tr {
display: flex;
flex-wrap: wrap;
width: 100%;
}
td {
display: block;
width: 50%;
text-align: center;
}
td[colspan] {
width: 100%;
}
/* demo purpose */
table {
counter-reset: tds;
counter-increment: tds -1;
width: 100%;
}
td {
border: solid 1px;
}
td:before {
counter-increment: tds;
content: 'TD 'counter(tds);
}
body {
width: 500px;
margin: auto;
}
* {
box-sizing: border-box;
}<table>
<tr>
<td> </td>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>사용 mediaqueries 디스플레이를 업데이트 할 수 있습니다.DEMO
이것은 나를 위해 일했습니다! 너는 매우 도움이된다! 감사 :) – Maciej
난 그냥 CSS를 사용하여 테이블을 깰 수 있다고 생각하지 않습니다. 원하는 것을하기 위해 JS를 사용해야하고 창 너비에 따라 테이블을 다시 구조화해야합니다. 당신이 당신의 사이트가 더 반응하게 검색 할 경우
그러나, 당신은 여기에 몇 가지 흥미로운 기술을 가지고 https://css-tricks.com/responsive-data-table-roundup/
별로 가능한 자바 스크립트없이, 당신은 스타일 테이블 열 중단 할 수 없습니다.
다른 옵션은 flexbox 그리드를 사용하여 div로 테이블을 다시 할 수 있습니다.
이것은 어떤 테이블을위한 것이 아닙니다. 테이블 스타일을 해킹 할 수는 있지만 그건 나쁜 습관입니다. 쉽게 예를 들어 사용하는 것입니다 :
이전의 부트 스트랩 그리드 - https://getbootstrap.com/
이상 인 flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
편집 테이블, TR, TBODY와 다른 표시가 (이것은 기능의 파괴뿐만 아니라 나쁜 방법입니다 수직 배열 및 많은 다른 것들). div를 사용하고 반응 형 테이블로 스타일을 지정하면됩니다. Flexbox 또는 적어도 부트 스트랩 그리드로 스타일링하는 것이 가장 좋습니다.
나는 이것이 당신을 도울 것이라고 생각합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table responsive</title>
<style>
body {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
table {
width:100%;
text-align:center;
}
td {
border-bottom:1px solid #ccc;
padding:10px 0;
}
@media (max-width:600px) {
table {
display:block;
width:100%;
padding:0;
margin:0 auto;
}
tbody, tr {
display:block;
width:100%;
}
table td {
display:inline-block;
float:left;
width:50%;
}
td[colspan="2"] {
display:block;
width:100%;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>TD00</td>
<td>TD01</td>
<td colspan="2">Colspan 2</td>
<td colspan="2">Colspan 2</td>
</tr>
<tr>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
</tr>
<tr>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
</tr>
<tr>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
</tr>
</table>
</body>
</html>
이 하나
<style type="text/css">
td {
border: 1px solid;
text-align: center;
}
.t1{
margin: 0 auto;
text-align: center;
min-width: 600px;
}
.t2{
margin: 0 auto;
text-align: center;
display: none;
}
@media (max-width: 600px){
.t1{display: none;}
.t2{display: table;width: 100%;}
}
</style>
HTML을 시도하십시오
<tr>
<td>dsds</td>
<td>dsdsd</td>
<td colspan="2">sds</td>
<td colspan="2">dsdd</td>
</tr>
<tr>
<td>dsds</td>
<td>dsdsd</td>
<td>sds</td>
<td>dsdd</td>
<td>sds</td>
<td>dsdd</td>
</tr>
<tr>
<td>dsds</td>
<td>dsdsd</td>
<td colspan="2">sds</td>
<td colspan="2">dsdd</td>
</tr>
<tr>
<td>dsds</td>
<td>dsdsd</td>
<td>sds</td>
<td>dsdd</td>
<td>sds</td>
<td>dsdd</td>
</tr>