2. 程式人生 > >1畫素表格(1px表格)的5種製作方法

1畫素表格(1px表格)的5種製作方法

阿新 • • 發佈：2019-01-13

在轉載CSS覺問題及解決辦法時看到的這樣定義表格邊框的方法，如果用表格的border="1"屬性定義，實際顯示的寬度要比1px粗。所以我直到現在都是定義table的left和top邊框，然後定義td的right和bottom邊框，這樣也用css定義了一個表格的邊框。沒想到還有這麼簡單的方法，今天單獨摘出來奉獻給大家，希望能給您帶來幫助。

<!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=gb2312" />
<title>定義表格邊框的方法</title>
<style>
table{ border-collapse:collapse; }
td{ border:#ccc solid 1px; padding:5px; }
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>今天學了個新方法，奉獻給大家</td>
<td>以前都是定義table的上邊和左邊，然後定義td的右邊和下邊</td>
<td>沒想到還有這麼簡便的方法，以後就用這個方法了</td>
</tr>
<tr>
<td>我的網路家園</td>
<td>www.htmchina.cn</td>
<td>歡迎大家來訪問</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

<html>

--------------------------------------------------------------------------------------------------------------------------　　
<style type="text/css">

#table table {
border-collapse:collapse;
border-right:#ff0000 1px solid;
border-bottom:#ff0000 1px solid;
border-color: #ff0000;
}
#table td {
border-left:#ff0000 1px solid;
border-top:#ff0000 1px solid;
}
</style>
<body style="margin:0">
<br>
方法1：利用亮邊框和暗邊框[推薦]
<table width="100%" height="100" border="1" bordercolorlight="red" bordercolordark="white" cellpadding="0" cellspacing="0">
<tr>
<td>www.blueidea.com</td>
<td>www.blueidea.com</td>
</tr>
<tr>
<td>www.blueidea.com</td>
<td>www.blueidea.com</td>
</tr>
</table>

方法2：利用collapse[推薦]
<table width="100%" height="100" border="1" bordercolor="blue" cellspacing="0" style="border-collapse:collapse">
<tr>
<td>www.blueidea.com</td>
<td>www.blueidea.com</td>
</tr>
<tr>
<td>www.blueidea.com</td>
<td>www.blueidea.com</td>
</tr>
</table>


方法3：(表格巢狀)
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ff0000">
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr bgcolor="#ffffff">
<td>極細表格邊框</td>
<td>極細表格邊框</td>
<td>極細表格邊框</td>
</tr><tr bgcolor="#ffffff">
<td>極細表格邊框</td>
<td>極細表格邊框</td>
<td>極細表格邊框</td>
</tr>
</table>
</td>
</tr>
</table>


<br>

方法4：(用css實現)
<div id="table">
<table width="100%" border="0" >
<tr>
<td>極細表格邊框</td>
<td>極細表格邊框</td>
<td>極細表格邊框</td>
</tr>
<tr>
<td>極細表格邊框</td>
<td>極細表格邊框</td>
<td>極細表格邊框</td>
</tr>
</table>
</div>


方法5：利用單元格的間距
<table width="100%" height="100" border="0" bgcolor="red" cellpadding="0" cellspacing="1">
<tr>
<td bgcolor="white">www.blueidea.com</td>
<td bgcolor="white">www.blueidea.com</td>
</tr>
<tr>
<td bgcolor="white">www.blueidea.com</td>
<td bgcolor="white">www.blueidea.com</td>
</tr>
</table>

</body>
</html>

相關推薦

1畫素表格(1px表格)的5種製作方法

在轉載CSS覺問題及解決辦法時看到的這樣定義表格邊框的方法，如果用表格的border="1"屬性定義，實際顯示的寬度要比1px粗。所以我直到現在都是定義table的left和top邊框，然後定義td的right和bottom邊框，這樣也用css定義了一個表格的邊框。沒想到還

1px的border 1畫素邊框

1.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="te

移動webApp - 1像素實現（點5像素的秘密）

nbsp 定義 ive 設備 還原 高清 strong 無法顯示 依賴 在移動web項目中，經常會實現以下1像素的邊框 移動web設計中，在retina顯示屏下網頁會由1px會被渲染為2px，那麽視覺稿中1px的線條還原成網頁需要css定義為0.5px 但是正當我們去用0.

解決手機1畫素問題

<div class="tab"> <div class="tab-item"> <router-link to="/">商品</router-link> </div> <d

stylus 移動端邊框1畫素問題解決方案

借鑑前端移動框架yo 1 border($border-width=1px, $border-color=#ccc, $border-style= solid, $radius= null) { 2 // 為邊框位置提供定位參考 3 position: relative; 4

stylus解決移動端1畫素邊框的問題

首先 我是借用了yo框架的border和他的媒體查詢組合 這兩個分別是在yo>lib>core>classes>_border.scss(用來獲取yo框架封裝的border)               &nbs

解決1畫素線問題

咱們話不多說，直接上程式碼 這是封裝了一個函式 在外面直接 border： 1px 0 0 0 #ccc使用即可   border($border-width = 1px, $border-color = #ccc, $border-style = solid, $radius

如何做1畫素細邊框的table？

#test{border-collapse:collapse;border:1px solid #ddd;} #test th,#test td{border:1px solid #ddd;} <table id="test"> <tr><th>姓名&

利用stylus解決移動端1畫素邊框的問題

首先 我是借用了yo框架的border和他的媒體查詢組合 這兩個分別是在yo>lib>core>classes>_border.scss(用來獲取yo框架封裝的border)               &nbs

stylus解決移動端1畫素線等問題

  引用了yo框架中的_border.scss(用來獲取yo框架封裝的border)   以及   variables.scss(用來獲取媒體查詢的規則) 1 border($border-width = 1px, $border-color =

移動端解決邊框1畫素問題

這是border.css的一段原始碼       先說明為啥會有1畫素這種問題吧 :因為當我們在做移動端 時當適配不同的手機時 每個手機的dpr是不同的 （dpr=物理畫素/邏輯畫素  物理畫素也就是真實呈現在手機螢幕上的大小 邏輯畫素則是開發

sass 上下邊框1畫素實現

@media(-webkit-min-device-pixel-ratio:1.5), (min-device-pixel-ratio:1.5) { .border-t-1px {&::before {-webkit-transform: scaleY(0.7);transform: scal

1畫素問題

經常會遇到在iOS手機上寫 border-bottom: 1px solid #eaeaea; 會顯得這一畫素特別的粗。 所以後來採用這麼一個方式來代替： .underline {   width: 100%;   height: 1px;   back

餓了麼專案---4、移動端檢視專案及border 1畫素問題

一、如何在手機等移動端檢視頁面 1.1檢視電腦IP地址 $ ipconfig---------->10.2.65.112 1.2 、獲取當前網頁的完整url地址，到草料二維碼網站(http://cli.im/)中講該ip地址轉變成一個二維

Android之D面試題②程序保活的一般套路(1畫素Activity/賬號同步/Jobscheduler/系統服務捆綁)

       讀到這裡，你或許有一個疑問，假設現在記憶體不足，空程序都被殺光了，現在要殺後臺程序，但是手機中後臺程序很多，難道要一次性全部都清理掉？當然不是的，程序是有它的優先順序的，這個優先順序通過程序的adj值來反映，它是linux核心分配給每個系統程序的一個值，代表程序的優先順序，程序回收機制就是根據這

使用min-device-pixel-ratio媒體功能實現真正的1畫素border

由於裝置畫素比存在的原因，我們在處理設計圖的一些邊框時，對於1px的border，如果在程式碼裡將其寫死，可能在不同裝置畫素比的裝置中，粗細不一樣，尤其是在目前大多數裝置畫素比為2的裝置中，過粗。 那麼利用媒體查詢和”min-device-pixel-ratio

opencv中對影象畫素點訪問的三種方法利用程式進行解讀

程式碼放到自己的工程中，執行就可以的 #include <opencv2\opencv.hpp> #include <opencv2\core\core.hpp> #include <opencv2\highgui\highgui.hpp> #includ

移動端1畫素邊框問題處理程式碼學習

慕課網餓了麼專案骨架搭建時，關於1畫素邊框處理程式碼如下： App.vue裡面： <style lang='stylus' rel='stylesheet/stylus'> @import './common/stylus/mixin.st

移動1畫素的問題

問題：一般在移動端，由於dpr（裝置畫素比）不為1，在PC端顯示1畫素的邊框，在移動端其實顯示為2px。解決這個問題，主要思想是：使用偽元素設定1px的邊框，然後使用媒體查詢，根據dpr的大小，對邊框進

DICOM世界觀·第二章：[1]畫素 Pixel (Picture Element)

背景： 原本該小節想直接套用上世紀一片著名論文《A Pixel Is Not A Little Square》作為標題，怎奈英文原文資訊量較大，內部蘊含了很多關於取樣定理的資訊理論知識，雖然通讀數遍但依然感到些許迷茫，怕對讀者有誤導，所以直接簡單一點以《畫素P