html问题,请问我在wordpress插入表格时,代码怎么改能让里面的小单元格边框为黑色实线? 在html中 怎样改变表格边框线的颜色?

html\u8bed\u6cd5\uff0c\u8ba9table\u91cc\u7684\u6bcf\u4e00\u4e2a\u884c\u548c\u5217\u90fd\u6709\u9ed1\u8272\u7684\u8fb9\u6846\u7ebf\u600e\u4e48\u5f04\uff1fcss\u4ee3\u7801\u3002

\u4e24\u79cd\u65b9\u6cd5\u53ef\u4ee5\u4f7f\u7528\uff0c1\u3001\u4f7f\u7528style\u7684td{border:1px solid black;}\u5c5e\u6027\u53ef\u4ee5\u6dfb\u52a0\u8fb9\u7ebf\uff0c\u4f46\u662f\u5bb9\u6613\u7ebf\u6761\u91cd\u53e0\uff0c\u663e\u5f97\u4e0d\u7f8e\u89c2\uff0c\u5355\u72ec\u4f7f\u7528td{border-top:1px solid black;}\u7b49\u5c5e\u6027\u64cd\u4f5c\u7e41\u7410\uff0c\u57fa\u672c\u4e0d\u5efa\u8bae\u4f7f\u7528
2\u3001\u4f7f\u7528table\u81ea\u5e26\u5c5e\u6027\uff0c\u53ef\u4ee5\u76f4\u63a5\u4e3atable\u5185\u7684\u5355\u5143\u683c\u52a0\u4e0a\u7ebf\u6761\uff0c\u4f46\u662f\u5355\u5143\u683c\u4e4b\u95f4\u9ed8\u8ba4\u6709\u8fb9\u8ddd\uff0c\u5982\u679c\u4e0d\u60f3\u8981\u7684\u8bdd\u4f7f\u7528cellspacing="0"\u6e05\u7a7a\u8fb9\u8ddd\uff0c\u800c\u4e14\u4f7f\u7528 border="1"\u7ebf\u6761\u4f1a\u663e\u5f97\u6bd4\u8f83\u7c97\uff0c\u6240\u4ee5\u53ef\u4ee5\u4f7f\u7528style="border-collapse:collapse;"\u8ba9\u5176\u53d8\u7ec6\uff0c\u4ee5\u4e0b\u4e3ademo\u4ee3\u7801\u3002

\u5728html\u4e2d \u600e\u6837\u6539\u53d8\u8868\u683c\u8fb9\u6846\u7ebf\u7684\u989c\u8272\u53ef\u4ee5\u901a\u8fc7\u8bbe\u7f6eborder\u7684\u503c\u6765\u5b9e\u73b0\u3002
\u4f8b\u5982\uff1a
border: 5px solid blue \u8868\u793a\u8fb9\u6846\u989c\u8272\u662f\u7eff\u8272\uff1b
border: 5px solid red \u8868\u793a\u8fb9\u6846\u989c\u8272\u662f\u7ea2\u8272\uff1b


\u6269\u5c55\u8d44\u6599
border\u7684\u7528\u6cd5\u4ecb\u7ecd

border \u7b80\u5199\u5c5e\u6027\u5728\u4e00\u4e2a\u58f0\u660e\u8bbe\u7f6e\u6240\u6709\u7684\u8fb9\u6846\u5c5e\u6027\u3002
\u53ef\u4ee5\u6309\u987a\u5e8f\u8bbe\u7f6e\u5982\u4e0b\u5c5e\u6027\uff1a
border-width
border-style
border-color
\u5982\u679c\u4e0d\u8bbe\u7f6e\u5176\u4e2d\u7684\u67d0\u4e2a\u503c\uff0c\u4e5f\u4e0d\u4f1a\u51fa\u95ee\u9898\uff0c\u6bd4\u5982 border:solid #ff0000; \u4e5f\u662f\u5141\u8bb8\u7684\u3002


<!DOCTYPE html>
<html>
<head>
<title>Table example by suoling.net</title>
<style>
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
 table,tbody,tr, th, td {
border: 0;
font-family: inherit;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
th {
text-align: left;
}

.table-bordered>tbody>tr>th, .table-bordered>tbody>tr>td {
border: 1px solid #ddd;
}
 .table>tbody>tr>th, .table>tbody>tr>td {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}

</style>
</head>
<body>
<table class="table table-bordered">
<tbody>
<tr>
<th>
名称
</th>
<th>
年龄
</th>
</tr>
<tr>
<td>
张三
</td>
<td>
55
</td>
</tr>
<tr>
<td>
赵四
</td>
<td>
45
</td>
</tr>
</tbody>
</table>
</body>
</html>

桌面端效果:

缩放到接近最小的手机屏幕的效果:

不了解再问,祝愉快!



<style type="text/css">
table,th,td
{
border-collapse:collapse;
border:2px solid black;
}
</style>

 只要是加上border-collapse:collapse;元素。



  • 鎴戝湪word缂栬緫浜html浠g爜,浣嗘庝箞鐪嬬綉椤垫晥鏋滃憿
    绛旓細鍦ㄦ枃鏈枃妗d腑缂栬緫锛岀劧鍚庡湪鎶婂悗缂鍚嶆敼涓html鎴杊tm
  • word鏂囨。涓HTML鏍煎紡鏄粈涔堟剰鎬?鏈夊暐鐢?杩樻湁涓嬮潰鐨勬牸寮忓張鏈変粈涔堜笉鍚...
    绛旓細HTML鏄寚瓒呮枃鏈垨瓒呮枃鏈摼鎺ャ侶TML鏂囨湰鏄敱HTML鍛戒护缁勬垚鐨勬弿杩版ф枃鏈锛孒TML鍛戒护鍙互璇存槑鏂囧瓧銆佸浘褰佸姩鐢汇佸0闊炽佽〃鏍笺侀摼鎺ョ瓑銆傛槸缃戦〉鏈鍩烘湰鐨勮瑷銆傛墦瀛楃殑鏃跺欙紝褰撻偅涓槸鍥剧墖鐨勬椂鍊欙紝浣犲氨鍙兘鑰佽佸疄瀹炵殑杈撳叆浜嗐備负浜嗘柟渚匡紝浣犲彲浠ユ妸鏄剧ず灞忓垎涓轰笂涓嬩袱閮紝鎶word鏀惧埌涓嬪崐閮ㄥ垎浣犲氨鍙互涓杈圭湅鍒扮綉椤典笂鐨勬枃瀛...
  • word鐢熸垚html鏃堕亣鍒扮殑闂,澶у甯府蹇
    绛旓細鍥犱负鏈韩word鍦ㄤ繚瀛樼殑鏃跺欏氨宸茬粡鍦ㄥ悗鍙板府浣犳坊鍔犱簡html鏍囩璇彞銆備綘鐩存帴鍦word 閲 鍐 : 杩欐槸涓涓潪甯哥畝鍗曠殑 HTMl 鐒跺悗鐒跺悗閫夋嫨鏂囦欢-鍙﹀瓨涓-鏍煎紡涓夆滅綉椤碘濆氨鏄綘鎯宠鐨勬晥鏋滀簡銆
  • 璇烽棶: 鎴戝湪word鏂囨。閲屾彃鍏ヤ簡寰堝鍒嗛殧绗(涓嬩竴椤),鎬庝箞鍘绘帀?
    绛旓細鎸塁trl+H锛屾煡鎵惧唴瀹瑰悗杈撳叆锛宆b锛堝垎鑺傜锛夛紝鏇挎崲涓虹暀绌猴紝鐒跺悗鍏ㄩ儴鏇挎崲锛屽鏋滀綘鎻掑叆鐨勬槸鍒嗛〉绗︽煡鎵惧唴瀹瑰悗灏辫緭鍏m銆
  • 鍏充簬鍦HTML涓娣诲姞word 缂栬緫鍣ㄧ殑闂
    绛旓細濡備笅姝ラ鍙互璁剧疆Word涓哄湪IE涓夋嫨鈥滄煡鐪嬫簮鏂囦欢鈥濇椂鎵撳紑鐨勭紪杈戝櫒銆1銆佹墦寮娉ㄥ唽琛ㄧ紪杈戝櫒锛堝紑濮-杩愯锛岃緭鍏egedit锛屽洖杞︼級锛2銆佹祻瑙堝埌杩欎釜浣嶇疆锛欻KEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\View Source Editor\Editor Name 3銆佸弻鍑诲彸杈圭殑閭d釜鈥滐紙榛樿锛夆濓紝璁剧疆涓轰綘鐨刉ord鍙墽琛屾枃浠剁殑瀹屾暣璺緞...
  • ...鐒跺悗鎶word淇濆瓨鎴愪簡html鏍煎紡,褰撴垜鎵撳紑閭d釜html鐨鏃跺,鏍煎紡鍏ㄩ兘涔变簡...
    绛旓細鐢word鐨缃戦〉妯″紡鍋氱殑缃戦〉浼氫骇鐢熷ぇ閲忕殑鍨冨溇浠g爜锛屽苟涓斿緢瀹规槗鍑虹幇鍍忎綘涓婇潰鐨闂銆傚缓璁綘浣跨敤涓撲笟鐨勭綉椤靛埗浣滃伐鍏凤紝姣斿dreamweaver鎴杅rontpage,杩欎簺閮芥槸鍗宠鍗冲緱鐨勭綉椤电紪杈戝伐鍏凤紝绠鍗曠殑璇达紝灏辨槸浣犲彲浠ュ儚浣犲厛鍓嶅仛娉曚竴鏍峰仛濂芥帓鐗堬紝鐒跺悗淇濆瓨鎴html鏂囨。鐨勫氨濂戒簡锛屽鏋滀綘杩樹笉浼氬仛锛屾妸浣犵殑浣滀笟鍙戞垜閭鎴戝府浣犲仛锛...
  • 濡備綍鍦html缃戦〉涓樉绀word鏂囨。鐨勫唴瀹
    绛旓細1.word鑷姩杞崲甯冨眬鐨勫姛鑳藉叾瀹炲苟涓嶆槸寰堝ソ锛屽線寰閫犳垚涓巜ord鍐呯殑甯冨眬閿欎贡鐨勬儏鍐点傝寰堝鏈潵璐逛簡寰堝蹇冩濊璁ord甯冨眬鐨勪汉闈炲父鎭肩伀銆傚浜庤繖绉闂锛屾垜閲囩敤浜嗙幇鍦╳ord鍐呰璁¤〃鏍煎竷灞鐨勬柟娉曪紝鎶婃墍鏈夌殑鍐呭閮芥斁鍦ㄤ簨鍏堢敾濂界殑琛ㄦ牸鍐咃紝骞跺皢琛ㄦ牸鐨勮竟妗嗛兘璁炬垚鏃犮傚湪璁捐鏃跺彲浠ョ湅鍒拌竟妗嗭紝鍦杩愯鏃跺氨娌℃湁浜嗭紝闈炲父鐨...
  • 鍏充簬鍦HTML涓娣诲姞word 缂栬緫鍣ㄧ殑闂
    绛旓細濡備笅姝ラ鍙互璁剧疆Word涓哄湪IE涓夋嫨鈥滄煡鐪嬫簮鏂囦欢鈥濇椂鎵撳紑鐨勭紪杈戝櫒銆1銆佹墦寮娉ㄥ唽琛ㄧ紪杈戝櫒锛堝紑濮-杩愯锛岃緭鍏egedit锛屽洖杞︼級锛2銆佹祻瑙堝埌杩欎釜浣嶇疆锛欻KEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\View Source Editor\Editor Name 3銆佸弻鍑诲彸杈圭殑閭d釜鈥滐紙榛樿锛夆濓紝璁剧疆涓轰綘鐨刉ord鍙墽琛屾枃浠剁殑瀹屾暣璺緞...
  • 璇烽棶鎴鐨word鏂囨。鍦ㄧ紪鍐欐椂榧犳爣浼氫贡璺虫槸浠涔堝師鍥?
    绛旓細褰撲綘鍦╓ord鏂囨。缂栬緫鏃堕亣鍒伴紶鏍囦贡璺崇殑鎯呭喌锛屽彲鑳界敱浠ヤ笅涓変釜鍥犵礌瀵艰嚧锛氶鍏堬紝榧犳爣鐨勭伒鏁忓害杩囬珮鏄父瑙佸師鍥犱箣涓銆傚綋榧犳爣杩囦簬鐏垫晱锛屽嵆浣胯交寰Е纰帮紝涔熷彲鑳藉紩鍙戝揩閫熺Щ鍔ㄦ垨璇Е鍙屽嚮锛屼粠鑰岄犳垚鏂囨。缂栬緫鏃剁殑鍥版壈銆傚叾娆★紝榧犳爣鍦ㄤ笉浣跨敤榧犳爣鍨垨浣跨敤涓嶅悎閫傜殑榧犳爣鍨椂锛屽厜婊戠殑琛ㄩ潰鍙兘瀵艰嚧榧犳爣绉诲姩涓嶇晠锛岀敋鑷宠繃浜庢祦鐣咃紝浠庤...
  • 鎬庝箞鍦html涓鎵撳紑涓涓word
    绛旓細1缃戜笂鏈変汉璇寸洿鎺 <a href="a.doc">宸茬粡 </a>缁撴灉鏄笅杞 2activxobject(word.application)缁撴灉鏄湰鍦皐ord鎵撳紑鐨 3杩樻湁浜鸿word 鐨save as 锛屾檿鎴戠殑澶╋紝浣犳庝箞涓嶇湅鐪word鐨鏍煎紡閮芥病鏈変簡锛屾垜杩樻庝箞缂栬緫鍜屾彁鍙栧憿锛熸垜鎯宠鐨勬槸鍦ㄧ綉椤典笂闈㈠氨鐩存帴缂栬緫浜嗭紝鑷繁涓嬩釜frontpage2003-鎻掑叆-web缁勪欢-楂樼骇鎺т欢-...
  • 扩展阅读:html用什么软件打开 ... html5在线网站 ... 浏览器打开indexhtml ... 免费的html大作业网站 ... html网页制作个人网站 ... html官方文档网站 ... html+css网页制作成品 ... html网页跳转代码到子网页 ... 免费html网站代码 ...

    本站交流只代表网友个人观点,与本站立场无关
    欢迎反馈与建议,请联系电邮
    2024© 车视网