請問我要怎麼把table的邊邊消掉

css html table

amyqaz 2021-08-26 10:24:33 ‧ 1331 瀏覽

分享至

各位好，想請教我要怎麼把邊邊的灰框消除?
我看網路上用border-collapse:collapse;但還是無法.....
以下是我的程式碼:

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
	<link  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" rel="stylesheet">
	<link  href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.css" rel="stylesheet">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
	 
	<div class="container" >
	  
	 <br><br>
			 
				<table class='table table-bordered text-center max ' style="border-collapse:collapse; ">
					<tr class='' bgcolor='#999961'  style="border-spacing:0; collapse;border:1px solid white;">
					<th class='text-center align-middle' style="border-radius:10% 0% 0% 0%;"> 客戶</th>
					  
					 <th class='text-center align-middle' >數量</th>
					 
					<th class='text-center align-middle' style="border-radius:0% 10% 0% 0%; "> 聯絡人<br>電話</th>
				  
					</tr> 
		  
				</tbody>
				</table>
			 
				</form>
				 
		 
	</div>

謝謝大家

窮嘶發發發 iT邦高手 1 級 ‧ 2021-08-26 13:56:59 檢舉

看到這邊 table table-bordered text-center max
有上 bootstrap 吧，不要邊框就把 table-bordered 拿掉啊
不然去 bootstrap 官網看一下，關於table 有那些class 可用，給他用上去就好
不用想得太複雜

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

japhenchen

iT邦超人 1 級 ‧ 2021-08-26 10:32:27

最佳解答

table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}


/* 左上角 border-radius */

table tr:first-child th:first-child {
    border-top-left-radius: 10px;
}


/* 右上角 border-radius */

table tr:first-child th:last-child {
    border-top-right-radius: 10px;
}


/* 左下角 border-radius */

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}


/* 右下角 border-radius */

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

回應 10
分享
檢舉

看更多先前的回應...收起先前的回應...

amyqaz iT邦新手 4 級 ‧ 2021-08-26 10:55:25 檢舉

大大好:這方法是可行的，可是只要我加上這行就會破功，他的灰色的邊邊又會出現....

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

japhenchen iT邦超人 1 級 ‧ 2021-08-26 11:07:25 檢舉

把你自定的style css加在bootstrap.min.css的下方~

japhenchen iT邦超人 1 級 ‧ 2021-08-26 11:08:53 檢舉

這是我的網頁用的

<link href="/scripts/bootstrap-5.0.0-beta3-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery-3.6.0.min.js"></script>
<script src="/scripts/main.js"></script>
<link href="/scripts/common.css" rel="stylesheet">