Html-如何正確給table加邊框

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

總結一下table的使用給頁面一些佈局帶來方便
遇到有邊框的類似表格這樣的佈局，你就可以考慮用table佈局了，這樣就省去你特殊設定邊框…而且table可以根據內容自適應哦
1.html

    <table>
            <caption>縮放你的瀏覽器查看錶格的響應式效果！</caption>
            <thead>
                <tr>
                    <th>Name</th>
                    <th 
>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr 
>
                    <td>Airi Satou</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>33</td>
                    <td>2008/11/28</td>
                    <td>$162,700</td>
                </tr 
>
                <tr>
                    <td>Angelica Ramos</td>
                    <td>Chief Executive Officer (CEO)</td>
                    <td>London</td>
                    <td>47</td>
                    <td>2009/10/09</td>
                    <td>$1,200,000</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$86,000</td>
                </tr>
                <tr>
                    <td>Bradley Greer</td>
                    <td>Software Engineer</td>
                    <td>London</td>
                    <td>41</td>
                    <td>2012/10/13</td>
                    <td>$132,000</td>
                </tr>
                <tr>
                    <td>Brenden Wagner</td>
                    <td>Software Engineer</td>
                    <td>San Francisco</td>
                    <td>28</td>
                    <td>2011/06/07</td>
                    <td>$206,850</td>
                </tr>
                <tr>
                    <td>Brielle Williamson</td>
                    <td>Integration Specialist</td>
                    <td>New York</td>
                    <td>61</td>
                    <td>2012/12/02</td>
                    <td>$372,000</td>
                </tr>
                <tr>
                    <td>Bruno Nash</td>
                    <td>Software Engineer</td>
                    <td>London</td>
                    <td>38</td>
                    <td>2011/05/03</td>
                    <td>$163,500</td>
                </tr>
                <tr>
                    <td>Caesar Vance</td>
                    <td>Pre-Sales Support</td>
                    <td>New York</td>
                    <td>21</td>
                    <td>2011/12/12</td>
                    <td>$106,450</td>
                </tr>
                <tr>
                    <td>Cara Stevens</td>
                    <td>Sales Assistant</td>
                    <td>New York</td>
                    <td>46</td>
                    <td>2011/12/06</td>
                    <td>$145,600</td>
                </tr>
                <tr>
                    <td>Cedric Kelly</td>
                    <td>Senior Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2012/03/29</td>
                    <td>$433,060</td>
                </tr>
            </tbody>
        </table>

2.css

       table {
            width: 100%;
            font-size: .938em;
            border-collapse: collapse;/*邊框會合併為一個單一的邊框*/
        }
        caption {
            margin: 1em 0 .7em 0;
            text-align: center;
            font-weight: bold;
            font-size: 120%;
            letter-spacing: .5px;
            color: #fff;
        }

        th {
            text-align: left;
            padding: .5em .5em;
            font-weight: bold;
            background: #66677c;color: #fff;
        }

        td {
            padding: .5em .5em;
            border-bottom: solid 1px #ccc;
        }

        table,table tr th, table tr td { border:1px solid #0094ff; }/*設定邊框的*/

3.執行結果：
這裡寫圖片描述

主要是
border-collapse: collapse;（邊框會合併為一個單一的邊框）
table,table tr th, table tr td { border:1px solid #0094ff; }（設定邊框的）
其他的可以自己根據公司要求微調~~~

Html-淺談如何正確給table加邊框

order padding 黑色邊框導致一般來說無需就是每一個 asa 一般來說，給表格加邊框都會出現不同的問題，以下是給表格加邊框後展現比較好的方式　　<style> table,table tr th, table tr td

Html-如何正確給table加邊框

總結一下table的使用給頁面一些佈局帶來方便遇到有邊框的類似表格這樣的佈局，你就可以考慮用table佈局了，這樣就省去你特殊設定邊框…而且table可以根據內容自適應哦 1.html

淺談如何正確給table加邊框

too text 不同只需要 mage 徹底邊線包括 -1 一般來說，給表格加邊框都會出現不同的問題，以下是給表格加邊框後展現比較好的方式 <style> table,table tr th, table tr td { border:

正確給table加邊框

該文章解決用table標籤畫表格時，用border屬性產生的表格重合線加粗的問題。 css部分： table,table tr th, table tr td { border:1px solid #a8aeb2; padding: 5px 10p

Android 給圖片加邊框

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

給linnerLayout加邊框（可以只加底部）

先看圖：很簡單給linnerlayout加邊框。border.xml 佈局如下： item 裡面上下左右的邊框可隨意更改。 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:andro

Android給CardView加邊框以及水波紋效果

最近開發App遇到一個效果，先看效果如下圖，就是列表中item每個都是CardView，然後cardView有一個邊框紅色或者其他顏色，還需要item點選有水波紋效果。設定邊框，圓角等我們很自然的想到了shape，先定義shape， <?xm

如何給table加滾動條

要給table新增滾動條其實很簡單，主要是給table放到一個div裡去，然後再設定div顯示滾動條即可。示例程式碼如下所示：  <div style="overflow-x: auto; overflow-y: auto; heig

table 加邊框

給tr加邊框無效解決方案

<table> <tr style='border:1px solid #000'> <td>12</td> <td&g

給TextView加邊框

先寫drawable裡面的xml檔案，裡面設定shape來設定文字框的特殊效果。 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.co

[HTML][CSS]table中加邊框的樣式（所有td都加薄邊框）

table中加邊框的樣式（所有td都加薄邊框） <style type="text/css"> .border-table { border-collapse: collapse; border: none; } .border-tabl

html中給表格添加斜線

height tom font -s 容器 diagonal diag dia -c 用div+css模擬表格對角線類別姓名年級班級成績班級均分張三三 2 62 61 李四三 1 48 67 王

Bootstrap3基礎 img-thumbnail 給圖片加一個圓角的邊框

dev scala boot 一個 studio styles 比例 rip ast 禮悟：　　公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。　　

html之一行程式碼給table設定標題

給圖片加圖片邊框圖片邊框要求為PNG格式

package com.product.utils; import javax.imageio.ImageIO; import java.awt.*; import java.awt.image.BufferedImage; import java.io.*; import jav

HTML TABLE 細邊框樣式用HTML作為模板，JAVA匯出PDF相容table樣式

在平時用css寫html table細邊框樣式時候，有很多種寫法，但是發現用JAVA匯出PDF，用HTML作為模板的時候，在轉換時出現樣式不相容問題，經過測試，以下樣式可以完美相容。現整理如下： <style> table {

tabel佈局中給tr加border邊框

今兒自己在做專案時，用到了table佈局。但是設計給的是每行有底邊框。這個給難到自己了，後來自己搜尋解決了。 <table> <tr> <td> <p>獎池金額：</p>

給表TABLE加註釋

\documentclass[10pt]{article}\usepackage{threeparttable}\usepackage{amsmath}\usepackage{dcolumn}\usepackage{multirow}\usepackage{booktabs}\newcolumntype{d}

CSS設定html table表格邊框樣式

之前就有些迷糊 table tr行 th表頭 td表格單元 th會預設加粗顯示 1.只對table標籤設定紅色邊框樣式 */ able-a table{border:1px solid #333} 2、對td設定邊框表格中

Html-如何正確給table加邊框

相關推薦