CODEWITHSUNDEEP
htmlcssbootstrap-4
Razarach
Razarach

Reputation: 29

How to add shadow to one of table columns

I need to create table with three columns, one have background color, and borders between are separated. I'm using Bootstrap for this project. For table i used colgroup to create columns and transparent border to separate columns. This solution worked, not great not terrible. My problem is that I need to add shadow and border-radius to column with blue background. I didn't find any solution that works. Here is image of table that i need to create - [table design][1]

EDIT: here is the code https://jsfiddle.net/Razarach/hd8tkfqx/

<table>
        <colgroup>
        <col class="col-xs-2 col-sm-2 col-md-4 col-lg-4 col-xl-4" />
        <col class="col-xs-2 col-sm-2 col-md-3 col-lg-3 col-xl-3" />
        <col class="col-xs-2 col-sm-2 col-md-3 col-lg-3 col-xl-3 blue" />
        </colgroup>
    <thead>
        <tr>
            <th class="white-bg-bt">&nbsp</th>
            <th class="table-title white-bg-bt">text</th>
            <th class="table-logo blue-bg-bt">text</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="white-bg">text</td>
            <td class="white-bg text-center"><img src="assets/x-mark.svg"></td>
            <td class="blue-bg text-center"><img src="assets/check-mark.svg"></td>
        </tr>
        <tr>
            <td class="white-bg">text</td>
            <td class="white-bg text-center"><img src="assets/x-mark.svg"></td>
            <td class="blue-bg text-center"><img src="assets/check-mark.svg"></td>      
        </tr>
        <tr>
            <td class="white-bg">text</td>
            <td class="white-bg text-center"><img src="assets/x-mark.svg"></td>
            <td class="blue-bg text-center"><img src="assets/check-mark.svg"></td>      
        </tr>
        <tr>
            <td class="white-bg">text</td>
            <td class="white-bg text-center"><img src="assets/x-mark.svg"></td>
            <td class="blue-bg text-center"><img src="assets/check-mark.svg"></td>      
        </tr>
    </tbody>
</table>

Upvotes: 2

Views: 1497

Answers (3)

Raeesh Alam
Raeesh Alam

Reputation: 3480

You can solve by css :last-child property with help of Bootstrap4 Classes. In this below snippet you can see rounded corner of last column with Shadow effect.

.table col:last-child{
	background: #72B0E3;
}
.table thead th:last-child{
	border-top-left-radius: 10px; 
	border-top-right-radius: 10px;
	box-shadow: 0 -10px 10px rgba(0,0,0,0.1), -5px 0px 5px rgba(0,0,0,0.1), 5px 0px 5px rgba(0,0,0,0.1);
}
.table tbody td:last-child{
	box-shadow: -5px 0px 8px rgba(0,0,0,0.15), 5px 0px 8px rgba(0,0,0,0.15);
	position: relative;
}
.table tbody td:last-child:before{
	content: '';
	position: absolute;
	width: 100%;
	height: 60%;
	left: 0;
	top: -30%;
	z-index: 0;
	background: #72B0E3;
}
.table tbody td:last-child i.fa{z-index: 2; position: relative;}
.table tbody td{
  border-color: #72B0E3; 
}
.table tbody tr:last-child td:last-child{
	border-bottom-left-radius: 10px; 
	border-bottom-right-radius: 10px; 
	box-shadow: 0 10px 10px rgba(0,0,0,0.1), -5px 0px 5px rgba(0,0,0,0.1), 5px 0px 5px rgba(0,0,0,0.1);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
  
<div class="container my-4">
	<div class="row">
		<div class="col-sm-12">
			<table class="table">
				<colgroup>
					<col class="col-8"/>
					<col/>
					<col/>
				</colgroup>
				<thead>
					<tr>
						<th class="border-0">Item</th>
						<th class="border-0">Action</th>
						<th class="border-0 text-white">Status</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Item #1</td>
						<td class="text-center text-danger"><i class="fa fa-times-circle"></i></td>
						<td class="text-center text-white"><i class="fa fa-check-circle"></i></td>
					</tr>
					<tr>
						<td>Item #2</td>
						<td class="text-center text-danger"><i class="fa fa-times-circle"></i></td>
						<td class="text-center text-white"><i class="fa fa-check-circle"></i></td>      
					</tr>
					<tr>
						<td>Item #3</td>
						<td class="text-center text-danger"><i class="fa fa-times-circle"></i></td>
						<td class="text-center text-white"><i class="fa fa-check-circle"></i></td>      
					</tr>
					<tr>
						<td>Item #4</td>
						<td class="text-center text-danger"><i class="fa fa-times-circle"></i></td>
						<td class="text-center text-white"><i class="fa fa-check-circle"></i></td>      
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>

Upvotes: 1

Ranjith v
Ranjith v

Reputation: 1062

you should add this

css

.blue, .blue-bg-bt, .blue-bg {
    border-radius: 14px;
    background-color: #147BD1;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
}

Upvotes: 0

Jasmine kaur
Jasmine kaur

Reputation: 1

Give that column of the table a specific id or class so that, it can be considered different from the rest of the columns in the table, then use css to give that unique column background color. For example:-

#uniqueColumn { background-color:blue; border-radius: 5px; box-shadow : 0 1px 2px 0 rgba(60,64,67,0.30), 0 1px 3px 1px rgba(60,64,67,0.15); }

You can change the css according to your choice.

Upvotes: 0

Related Questions