问题

我已经包含了CSS以使表格具有响应式功能，但这会导致具有日期选择器的<td>单元格在单行中显示每个月的日期。

table {
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 100%;
}
table caption {
	font-size: 1.5em;
	margin: .5em 0 .75em;
}
table tr {
	padding: .35em;
}
table th, table td {
	padding: 625em;
	text-align: center;
}
table th {
	font-size: .85em;
	letter-spacing: .1em;
	text-transform: uppercase;
}
@media screen and (max-width: 600px) {
	table {
		border: 0;
	}
	table caption {
		font-size: 1.3em;
	}
	table thead {
		border: none;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: 1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}
	table tr {
		display: block;
		margin-bottom: .625em;
	}
	table td {
		display: block;
		font-size: .8em;
		text-align: right;
	}
	table td::before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
		text-transform: uppercase;
	}
	table td:last-child {
		border-bottom: 0;
	}
}

table {
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
padding: .35em;
}
table th,table td {
padding: 625em;
ext-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
@media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-ize: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
display: block;
margin-bottom: .625em;
}
table td {
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}

答案1

得分: 0

不要回答我要翻译的问题。以下是要翻译的内容：

"Instead of changing every table element in your html, you need to be a bit more specific. Give the table you're trying to make responsive a class, ie myresponsivetable

<table class="myresponsivetable"> ... </table>

then adjust your CSS accordingly:

table.myresponsivetable {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
}
table.myresponsivetable caption {
    font-size: 1.5em;
    margin: .5em 0 .75em;
}
table.myresponsivetable tr {
    padding: .35em;
}
table.myresponsivetable th, table.myresponsivetable td {
    padding: 625em;
    text-align: center;
}
table.myresponsivetable th {
    font-size: .85em;
    letter-spacing: .1em;
    text-transform: uppercase;
}
@media screen and (max-width: 600px) {
    table.myresponsivetable {
        border: 0;
    }
    table.myresponsivetable caption {
        font-size: 1.3em;
    }
    table.myresponsivetable thead {
    ... and so on ...
}

This CSS will then not apply to the datepicker"

 table.myresponsivetable {
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
}
table.myresponsivetable caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table.myresponsivetable tr {
padding: .35em;
}
table.myresponsivetable th,table.myresponsivetable td {
padding: 625em;
ext-align: center;
}
table.myresponsivetable th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
@media screen and (max-width: 600px) {
table.myresponsivetable {
border: 0;
}
table.myresponsivetable caption {
font-ize: 1.3em;
}
table.myresponsivetable thead {
... and so on ...