模仿Excel設定單元格 -- table單個TD的邊框顏色效果

阿新 • • 發佈：2018-12-17

最近有這麼個需求，滑鼠點選td時需要變化td的顏色，由於一般都是適用了·border-collapse: collapse;這個屬性，故相鄰的兩個td共用一個邊框，先看一看設定不同值的效果:

td設定邊框效果

解決思路：直接設定行不通，設定2px又顯得太寬了，不過看了WPS的表格選中狀態時就是會比其它的要寬一倍的，而且行之間切換時td的高度會變化，會有跳動的感覺，所以當自身實現不了時，就得靠其它的元素來輔助了，上下左右分部用一個1px帶背景色的元素定位到td的四周，位置和元素的大小通過除錯了幾次，就找到剛剛好的值了。

<!DOCTYPE html>
<html lang="en">

< 
head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>設定單個TD邊框顏色</title>
    <style>
        * {
            box-sizing: border-box;
            margin 
: 0;
            padding: 0;
        }

        table {
            border: 1px solid #ddd;
            background: #eff2f6;
            width: 100%;
            max-width: 100%;
            margin-bottom: 0;
            border-collapse: collapse;
            border-spacing: 0;
        }

        td,
        tr,
        th 
 {
            border: 1px solid #ddd;
            padding: 10px 12px;
            text-align: center;
        }

        table td {
            position: relative;

        }

        table.demo1 td .line-sh {
            display: none;
        }

        table.demo1 td.active .line-sh {
            display: block;
            position: absolute;
            background-color: #016ac4;
        }

        table.demo1 td.active .line-sh.top {
            left: 0;
            top: -1px;
            width: calc(100% + 1px);
            height: 1px;
        }

        table.demo1 td.active .line-sh.right {
            right: -1px;
            top: 0;
            width: 1px;
            height: calc(100% + 1px);
        }

        table.demo1 td.active .line-sh.bottom {
            left: -1px;
            bottom: -1px;
            width: calc(100% + 1px);
            height: 1px;
        }

        table.demo1 td.active .line-sh.left {
            left: -1px;
            top: -1px;
            width: 1px;
            height: calc(100% + 1px);
        }

        table.demo1 td div {
            position: relative;
            z-index: 2;
        }

        table.demo2 td.active {
            border: 1px solid #016ac4;
        }

        table.demo3 td.active {
            border: 2px solid #016ac4;
        }
    </style>
</head>

<body>
    <div style="width:800px;margin:20px auto;">

        <div style="height:80px;padding-top:40px;"> 未經處理加1px邊框顏色效果</div>
        <table class="table table-bordered demo2">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>
                        <div>Mark</div>
                    </td>
                    <td>
                        <div>Otto</div>
                    </td>
                    <td>
                        <div>@mdo</div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>
                        <div>Mark</div>
                    </td>
                    <td>
                        <div>Otto</div>
                    </td>
                    <td>
                        <div>@mdo</div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>
                        <div>Mark</div>
                    </td>
                    <td>
                        <div>Otto</div>
                    </td>
                    <td>
                        <div>@mdo</div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td>
                        <div>Mark</div>
                    </td>
                    <td>
                        <div>Otto</div>
                    </td>
                    <td>
                        <div>@mdo</div>
                    </td>
                </tr>
            </tbody>
        </table>
        <div style="height:80px;padding-top:40px;"> 未經處理加2px邊框顏色效果</div>
        <table class="table table-bordered demo3">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>
                        <div>Mark</div>
                    </td>
                    <td>
                        <div>Otto</div>
                    </td>
                    <td>
                        <div>@mdo</div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>
                        <div>Mark</div>
                    </td>
                    <td>
                        <div>Otto</div>
                    </td>
                    <td>
                        <div>@mdo</div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>
                        <div>Mark</div>
                    </td>
                    <td>
                        <div>Otto</div>
                    </td>
                    <td>
                        <div>@mdo</div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td>
                        <div>Mark</div>
                    </td>
                    <td>
                        <div>Otto</div>
                    </td>
                    <td>
                        <div>@mdo</div>
                    </td>
                </tr>
            </tbody>
        </table>
        <div style="height:80px;padding-top:40px;">使用元素偽裝border效果</div>
        <table class="table table-bordered demo1">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>
                        <b class="line-sh top"></b><b class="line-sh right"></b>
                        <b class="line-sh bottom"></b><b class="line-sh left"></b>
                        <div>Mark</div>
                    </td>
                    <td>
                        <b class="line-sh top"></b><b class="line-sh right"></b>
                        <b class="line-sh bottom"></b><b class="line-sh left"></b>
                        <div>Otto</div>
                    </td>
                    <td>
                        <b class="line-sh top"></b><b class="line-sh right"></b>
                        <b class="line-sh bottom"></b><b class="line-sh left"></b>
                        <div>@mdo</div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>
                        <b class="line-sh top"></b><b class="line-sh right"></b>
                        <b class="line-sh bottom"></b><b class="line-sh left"></b>
                        <div>Mark</div>
                    </td>
                    <td>
                        <b class="line-sh top"></b><b class="line-sh right"></b>
                        <b class="line-sh bottom"></b><b class="line-sh left"></b>
                        <div>Otto</div>
                    </td>
                    <td>
                        <b class="line-sh top"></b><b class="line-sh right"></b>
                        <b class="line-sh bottom"></b><b class="line-sh left"></b>
                        <div>@mdo</div>
                    </td>
                </tr>
                <tr>
                    <th scop

 
 
              
           
              
              
            
            相關推薦
			   
            
            
            
 

    

    
    模仿Excel設定單元格 -- table單個TD的邊框顏色效果
      
							
							
							最近有這麼個需求，滑鼠點選td時需要變化td的顏色，由於一般都是適用了·border-collapse: collapse;這個屬性，故相鄰的兩個td共用一個邊框，先看一看設定不同值的效果:

解決思路：直接設定行不通，設定2px又顯得太寬了，不過看了WPS的表 

  
 

    

    
    laravel-excel設定單元格格式及ignoreEmpty的用法
      
								
								            
						
                laravel匯入匯出excel的外掛：mattwebsite/excel

安裝：

composer require mattwebsite/excel



 注意：3.0沒有匯入模組只有匯出功能 

  
 

    

    
    POI匯出Excel設定單元格格式2--建立與設定Excel合併單元格
       
  
  
 POI建立與設定Excel合併單元格 
 話不多說上栗子 
 //準備工作
XSSFWorkbook wb = new XSSFWorkbook();
Sheet sheet = wb.createSheet("sheet1");
XSSFCreationHelper creationHel 

  
 

    

    
    POI匯出Excel設定單元格格式
       
  
  
 使用Apache的POI相關API匯出Excel設定單元格格式 
 栗子，一下各個程式碼之間的變數是通用的，要是在某個程式碼塊中找不到某個變數，則可以向上找尋 
 準備工作 
 InputStream = template//檔案輸入流
XSSFWorkbook wb = new XSSFW 

  
 

    

    
    java中匯出excel設定單元格的樣式為數字格式
      
                
//新增帶有formatting的Number物件 
jxl.write.NumberFormat nf = new jxl.write.NumberFormat("#.##");    //設定數字格式
jxl.write.WritableCellFormat wcfN  

  
 

    

    
    使用poi導出Excel，並設定單元格內容類型，拋出異常
      sdro   spa   ppr   相同   值類型   setfill   dropdown   整數   csdn   本例子使用的是HSSF,為Excel2003提供處理方案。
設定為輸入類型為數值

import org.apache.poi.hssf.usermodel.DVConstraint; 

  
 

    

    
    VUE-003-前端表格資料展示時，設定單元格（el-table-column）保留空格和換行
      在使用 el-table 展示資料時，單元格中的資料有可能存在空格和換行符，若不進行設定，瀏覽器預設會取消空格和換行符，如下所示： 
 
  
解決方法： 
將單元格的樣式 “white-space” 屬性設定為“pre-wrap” 即可解決。在VUE頁面中新增如下樣式設定 
 
  1  

  
 

    

    
    laravel匯出excel並設定單元格格式
       
 
 $list = $this->recommend($request);
$data = array();
foreach($list as $k=>$v){
    $data[] = array_values($v);
    $len = count($v);
}
$header = 

  
 

    

    
    C#實戰016:Excel操作-設定單元格屬性
       
 
  獲取單元格之後我們需要對單元格進行操作，比如過單元格寬、單元格高、單元格背景色、單元格邊框等等。 
 App = new Application();       //建立 Excel物件
object missing = Missing.Value;            //獲取缺少 

  
 

    

    
    css3實現固定表格頭部而無需設定單元格td的寬度
       
 
 背景 
 最近小弟在工作都是做後臺系統，一堆的表格，各種各樣的。然後需求上要有固定的表頭的表格，如下圖所示 
  
 在網上查詢固定表頭的實現方式為： 
 
  thead 設定為 fixed 
  拆分表格為兩個表格 thead一個，tbody一個 
 
 然而上面 

  
 

    

    
    Java poi匯出設定 Excel某些單元格不可編輯
       小白的總結，大神勿噴；需要轉載請說明出處，如果有什麼問題，歡迎留言 
一、需求： 
1、某一列 、某一行或某些單元格不可編輯，其他列可以編輯 
二、期間遇到的問題 
1、無法設定成不可編輯 
2、設定為不可編輯，匯出後發現所有單元格均不可編輯； 
原因：createCell();建立單元格後，單元 

  
 

    

    
    C# DataGridView匯出Excel，設定單元格合併，隱藏行
      
                不得不承認，做程式需要研究。
DataGridView匯出Excel的原始碼

using System.Windows.Forms;using System.Collections.Generic;using System;using Microsoft.Office.In 

  
 

    

    
    【POI框架實戰】——POI匯出Excel時設定單元格型別為數值型別
      
							
							
							
背 景 



　　最近做的一個ITFIN的專案中，後臺需要用POI實現匯出功能，匯出的資料中有文字格式，也有貨幣格式，所以為了方便在將來匯出的表格中做計算，存放貨幣的單元格需要設定為數值型別。

　　匯出的Excel的單元格都是文字格式（單元格左上角有個小三 

  
 

    

    
    在excel的單元格中設定下拉選單
      
								
								            
						
                
         很多時候我們在編輯excel的時候，在插入相同的內容時顯得比較繁瑣，下面教大家在excel單元格中設定下拉選單，直接點選後更改單元格內容。。步驟如下：
            1.選 

  
 

    

    
    EXCEl中如何設定單元格的下拉列表及背景顏色設定
      
                
1、選中單元格，點選資料-資料有效性
2、設定中有效性條件，允許-序列，勾選 提供空值 和提供下拉箭頭
3、來源中可手動輸入需要的值，中間以英文狀態下的逗號隔開

4、背景顏色設定：
選擇列-開始-條件格式-新建規則-選擇規則型別:只為包含以下內容的單元格設定樣式→編輯規則 

  
 

    

    
    Laravel Excel實現Excel/CSV檔案匯入匯出的功能詳解（合併單元格，設定單元格樣式）
      
							
							
							Laravel Excel實現Excel/CSV檔案匯入匯出（合併單元格，設定單元格樣式）

這篇文章主要給大家介紹了關於在Laravel中如何使用Laravel Excel實現Excel/CSV檔案匯入匯出功能的相關資料，文中通過示例程式碼介紹的非常詳細，對大 

  
 

    

    
    【Excel】統計不重複資料的個數，設定單元格不允許出現重複資料
      
                前篇文章我們介紹了一下Excel中如何設定資料有效性以及COUNTIF函式的用法，這篇文章主要介紹有重複資料時如何統計不重複資料的個數以及通過資料有效性去設定單元格不允許出現重複資料。

統計單列不重複的個數

如下圖所示，要統計B列資料的不重複個數，也就是通過、不適用、未測 

  
 

    

    
    Excel的單元格設置下拉選項並填充顏色
      bcd   同時   photos   spf   sel   菜單   完成   d3d   -o   



如何在Excel的單元格中加入下拉選項



 





方法/步驟
 


  第一步：打開excel文檔，選中需加入下拉選項的單元格。


 
 



 第二步：點擊菜單中的“數據”-&g 

  
 

    

    
    VBS讀取txt文檔數據查找Excel中單元格數據符合條件的剪切到工作表2中
      msg   readline   style   新建   font   cti   pre   creat   ins    
 
 

Dim fso,f,a
set oExcel = CreateObject( "Excel.Application" )
oExcel.Visible = false
‘ 

  
 

    

    
    如何把excel同一個單元格內的文字和數字分別提取出來？
      平臺   提取   pre   ont   文字   best   pan   數字   -1   平臺：excel 2010
目的：把excel同一個單元格內的文字和數字分別提取出來
操作：
假設數據在A1單元格:如果文字在前，B1=left(A1,lenb(A1)-len(A1))可得文字，C1=righ