table表格中實現圓角效果

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

原文:https://www.cnblogs.com/phermis/p/7059894.html

在table中設定border-radius發現不起作用，網上查找了一番，原因是border-collapse:collapse和border-radius不相容。

設計圖效果

程式碼實現效果：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #table_wrap > table  
{
            font-size: 16px;
            text-align: center;
            margin: 0 auto;
            border-collapse: separate;
            border-spacing: 0;
            border: 2px #000;
        }

        table thead tr,table tbody tr {
            height: 50px;
            line-height: 50px;
            /* 
background-color: pink;*/
        }
        table tr th:first-child,table tr td:first-child {/*設定table左邊邊框*/
            border-left: 2px solid #eaeaea;
        }
        table tr th:last-child,table tr td:last-child {/*設定table右邊邊框*/
            border-right: 2px solid #eaeaea;
        }
        table tr td:first-child,
        table tr td:nth-child(2),
        table tr td:nth-child(3),
        table tr td:last-child 
{/*設定table表格每列底部邊框*/
            border-bottom: 2px solid #eaeaea;
        }
        /*table tr:last-child td:first-child,
        table tr:last-child td:nth-child(2),
        table tr:last-child td:nth-child(3),
        table tr:last-child td:last-child{/!*設定table表格最後一列底部邊框*!/
            border-bottom: 2px solid #000;
        }*/
        table tr th {
            background: #eaeaea;
        }
        table tr:first-child th:first-child {
            border-top-left-radius: 12px;
        }

        table tr:first-child th:last-child {
            border-top-right-radius: 12px;
        }
        table tr:last-child td:first-child {
            border-bottom-left-radius: 12px;
        }

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

    </style>
</head>
<body>
<div id="table_wrap">
    <table class="table" width="800" cellspacing="0" cellpadding="0">
        <thead class="table_head">
        <tr>
            <th>頭部1</th>
            <th>頭部2</th>
            <th>頭部3</th>
            <th>頭部4</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1內容1</td>
            <td>1內容2</td>
            <td>1內容3</td>
            <td>1內容4</td>
        </tr>
        <tr>
            <td>2內容1</td>
            <td>2內容2</td>
            <td>2內容3</td>
            <td>2內容4</td>
        </tr>
        <tr>
            <td>3內容1</td>
            <td>3內容2</td>
            <td>3內容3</td>
            <td>3內容4</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

參考資料地址：http://www.cnblogs.com/purl135/p/4918920.html

table表格中實現圓角效果

原文:https://www.cnblogs.com/phermis/p/7059894.html在table中設定border-radius發現不起作用，網上查找了一番，原因是border-collapse:collapse和border-radius不相容。設計圖效果程式

jquery實現json資料填充到table表格中並且實現remove add 資料

window.onload=function(){ //var articles = getAllDbdata(); getAllDbdata(); $("#removebtn").bind("click", delOneRow); $("#addbtn").bind("click",

table表格中每行都有一個修改按鈕怎麼實現修改功能

示例圖如下：點選修改按鈕，如何修改按鈕所在行的資訊？一般像這種形式的頁面都是在js中動態拼接：關鍵在於按鈕採用append追加到<td>裡的button的,onclick事件

在Android中實現陰影效果

sta 技術 wid 語言 mat floating 大表 ado sch 在Android L推出後，Google提出了全新的設計語言：材質設計。其中很重要的一點就是陰影效果的使用，你可以為每一個View設置一個elevation值，相當於除了x、y之外的z值，z值決定

table表格中文字超出顯示省略號

overflow ops nbsp wrap 標簽內容 over -m hit 第一步： table {table-layout：fixed；}列寬由表格寬度和列寬度設定，不隨文字多少變化第二步： td { white-space:nowrap;/*文本不會換行，文本會

android中實現毛筆效果(View 中畫圖)

方法繪畫 object android中 validate 滑動一個 lineto 效果近期有一個項目設計一個APP實現通過觸摸屏實現毛筆寫字效果。傳統的繪畫板程序直接通過Path的moveTo和LineTo便可實現簡單的線條繪畫程序。然而要達到毛筆的筆鋒效果

java循環取出word table表格中所有的值

word//往表格裏面插入值或者打開表格填寫<%@ page language="java" import="java.util.*, java.awt.*" pageEncoding="gb2312"%><%@page import="com.zhuozhengsoft.pageoffic

使用js方法將table表格中指定列指定行中相同內容的單元格進行合並操作。

var get 是否 for true ntb doc ide 就是一、簡介使用js方法對html中的table表格進行單元格的行列合並操作。網上執行此操作的實例方法有很多，但根據實際業務的區別，大多不適用。所以在網上各位大神寫的方法的基礎上進行了部分修改以適合自己

layui給table表格中加入資料渲染表格

//id為 tableIns的表格資料為rows tableIns.reload({ data: }); 或者 table.reload('tableIns', { data : rows }); layui.form.render()

在把table表格中的資料匯出到Excel的時候，以科學計數法顯示位數多的數字時怎麼解決？

sbHtml.AppendFormat("<td> {0}</td>", data[i].IDcard.ToString()); sbHtml.AppendFormat("<td style='mso-number-format:\"@\"'

JSP中table表格中的文字自動換行

style="display:inline-block;width:300px;word-wrap:break-word;white-space:normal" <span></span> style樣式+span標籤 <td align="left"

layui在table表格中新增時間控制元件

timeB為name layui.table.render({ elem: '#lay-purchasing-change', id: "layTableId1" ,

js 將json資料自動繫結到 html table 表格中

/*自動繫結到table*/ var f = new Function("+[{id:"1",name:"aa"},{id:"2",name:"bb"}]+"); var list = f(); var h= "<table id='tb'>"; h+= "&l

Android佈局中實現圓角邊框

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_pa

記錄手動處理form表單中對table表格中的行資料的收集

通過ajax傳送資料到controller來處理，這是大部分web應用都會遇到的問題。而對於form表單資料的收集，如果要傳送資料少的話，我們可以一個一個來收集，而如果有很多也就是說批量操作那麼我們可以通過 $("#FormId").serializeArray()；來自動

jsp 讀取table表格中資料,並封裝成JSON陣列,用AJAX方式傳到後臺

//讀取table中的資料，並裝成陣列物件 //定義一個數組 var billData = []; //獲取選中的複選框 $(":checkbox[name='bill']").each(function(){ var bi

iView中table表格中使用select選框和下拉選單

{ title: '一級指標', key: 'age', render: (h, params) => {

table表格中td裡面字數太多，禁止換行，並將超出部分隱藏以...代替

css部分.tables{ width: 100%; height: 100%; table-layout: fixed; } .table_tit{ white-space: nowrap; //禁止td換行 overflow: hidden; //隱藏X,Y滾動條 t

Access中實現GroupConcat效果

T_Edwin ID Name Role 1 王楠部門經理 2 張樂營銷主任 3 張樂市場推廣員 4 歐陽華技術主管建立如上的表，並新增如下的函式： Public Function GroupConcat(sColumn As String, sTable As

解決頁面上table表格中的null值，

ajax請求成功後返回值有很多空值，而返回的資料key不同，不好做判斷，我用了下面的方法，把null值替換掉 var tab=document.getElementById("f")

table表格中實現圓角效果

相關推薦