CSS如何控制Table表格實(shí)現(xiàn)自適應(yīng)
2018-12-21 來(lái)源：
很多自適應(yīng)網(wǎng)站制作時(shí)都遇到這樣的問(wèn)題，文字和圖片很容易實(shí)現(xiàn)自適應(yīng)，但網(wǎng)站內(nèi)容頁(yè)的表格即很難實(shí)現(xiàn)自適應(yīng)。當(dāng)我們使用電腦瀏覽網(wǎng)站時(shí)，表格顯示正常，但如果使用手機(jī)瀏覽時(shí)，表格就會(huì)超出手機(jī)屏幕寬度。
那么如何實(shí)現(xiàn)網(wǎng)站Table表格自適應(yīng)呢？其實(shí)我們只需要給網(wǎng)站的Table表格添加一段CSS樣式代碼即可。
先讓我們看下Table表格自適應(yīng)的效果：
PC站Table表格
手機(jī)自適應(yīng)的Table表格
方法很簡(jiǎn)單，只需要將以下的CSS樣式 代碼放到自己網(wǎng)站的CSS文件中即可，用于控制手機(jī)狀態(tài)下的Table表格自適應(yīng)。（可以根據(jù)自己網(wǎng)站的需要做一些修改，如果不會(huì)CSS，可以先學(xué)習(xí)一下建站入門基礎(chǔ)教程）
?@media screen and (max-width: 600px) {
? table {
? border: 0;
? }
? table thead {
? display: none;
? }
? table tr {
? margin-bottom: 10px;
? display: block;
? border-bottom: 2px solid #ddd;
? }
? table td {
? display: block;
? text-align: right;
? font-size: 14px;
? border-bottom: 1px dotted #ccc;
? }
? table td:last-child {
? border-bottom: 0;
? }
? table td:before {
? content: attr(data-label);
? float: left;
? text-transform: uppercase;
? font-weight: bold;
? }
? }
通過(guò)加上這樣的CSS代碼就可以實(shí)現(xiàn)在自己建網(wǎng)站時(shí)，將自己網(wǎng)站的表格變?yōu)樽赃m應(yīng)表格了。
標(biāo)簽： isp 代碼 建網(wǎng)站 建站 網(wǎng)站制作
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。
