How to make a small square inside a rectangle having text? - html

Question

I have a screenshot below which I have replicated in HTML & CSS.
I have created the fiddle for the above screenshot. I have used Bootstrap 4 in order to make the table.
The snippets of HTML and CSS codes which I have used in order to make the rows are:
HTML:
<div class="body-manage-attendees">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col" class="number">Number</th>
<th scope="col" class="table2">Table</th>
<th scope="col" class="status">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Eve Doe</td>
<td class="number1">250</td>
<td class="table1">4</td>
<td class="right-itemsreceived">Items Received</td>
</tr>
<tr>
<td class="left">Fred Doe</td>
<td class="number1">250</td>
<td class="table1">2</td>
<td class="right-itemsreceived">Items Received</td>
</tr>
<tr>
<td class="left">Fred Doe's Guest 1</td>
<td class="number1">250</td>
<td class="table1">2</td>
<td class="right-itemswaiting"> Items Waiting</td>
</tr>
<tr>
<td class="left">Jack Doe</td>
<td class="number1">14</td>
<td class="table1">4</td>
<td class="right-unpaid">Unpaid</td>
</tr>
</tbody>
</table>
</div>
CSS:
.table td,
.table th {
border-top: none! important;
padding-left: 3%;
}
.table thead th {
border-bottom: none! important;
}
.table td.left {
padding-right: 32%;
}
.body-manage-attendees tbody tr:hover {
background-color: #EDEDED;
}
.body-manage-attendees .number {
padding-left: 2%;
padding-right: 6%;
}
.body-manage-attendees .table1 {
padding-left: 1%;
text-align: center;
padding-right: 6%;
}
.body-manage-attendees .table2 {
padding-left: 1%;
text-align: center;
padding-right: 6%;
}
.body-manage-attendees .status {
padding-left: 1%;
text-align: center;
}
.body-manage-attendees .right {
padding-left: 1%;
text-align: center;
}
.body-manage-attendees .right-bill {
padding-left: 1%;
color: white;
text-align: center;
background-color: #1173B7;
}
.body-manage-attendees .right-nobill {
padding-left: 1%;
text-align: center;
color: black;
}
Problem Statement:
I am wondering what changes do I need to make in the CSS codes above so that square box (marked with arrow in the screen-shot above) shows up inside the colored rectangle.

Answer 1

Please refer to this Fiddle
I have added some CSS rules and updated your HTML structure for the colored rectangles.
// General CSS
.nav-top-searchbar {
position: relative;
}
#ellipsis {
top: 12px;
position: absolute;
right: 43px;
cursor: pointer;
}
#ellipsis:focus {
outline: none;
}
#ellipsis:focus+.dropdown {
display: block;
}
input[type=text] {
width: 100%;
background: #10314c;
}
.dropdown {
background-color: #FFFFFF;
display: none;
/* padding-left: 2%; */
position: absolute;
/* height: 150px; */
right: 0;
width: 200px;
z-index: 10;
list-style-type: none;
padding-top: 25px;
padding-bottom: 25px;
box-shadow: 0 0 15px #888;
top: 2px;
}
.searchicon {
float: left;
margin-top: -20px;
position: relative;
top: 26px;
left: 8px;
color: white;
border: 1px solid #FFFFFF;
z-index: 2;
padding: 3px;
}
.table td,
.table th {
border-top: none! important;
padding-left: 3%;
}
.table thead th {
border-bottom: none! important;
}
.table td.left {
padding-right: 32%;
}
.dropdown a {
color: #676767;
font-weight: bold;
font-size: 14px;
}
.dropdown li {
padding-left: 20px;
}
.dropdown li:hover {
background-color: #EDEDED;
}
.body-manage-attendees tbody tr:hover {
background-color: #EDEDED;
}
.body-manage-attendees .number {
padding-left: 2%;
padding-right: 6%;
}
.body-manage-attendees .table1 {
padding-left: 1%;
text-align: center;
padding-right: 6%;
}
.body-manage-attendees .table2 {
padding-left: 1%;
text-align: center;
padding-right: 6%;
}
.body-manage-attendees .status {
padding-left: 1%;
text-align: center;
}
.body-manage-attendees .right {
padding-left: 1%;
text-align: center;
}
.body-manage-attendees .right-bill {
padding-left: 1%;
color: white;
text-align: center;
background-color: #1173B7;
}
.body-manage-attendees .right-nobill {
padding-left: 1%;
text-align: center;
color: black;
}
.body-manage-attendees .right-unapid {
padding-left: 1%;
color: white;
text-align: center;
background-color: #1173B7;
}
.body-manage-attendees .right-itemsreceived {
padding-left: 1%;
color: white;
text-align: center;
background-color: #10314C;
}
.body-manage-attendees .right-itemswaiting {
padding-left: 1%;
text-align: center;
color: white;
background-color: #10314C;
}
.body-manage-attendees .right-unpaid {
padding-left: 1%;
color: white;
background-color: #1173B7;
text-align: center;
}
.nav-top-bar {
display: flex;
justify-content: space-between;
padding: 0% 2.5%;
background: rgb(16, 49, 76);
align-items: center;
}
.square {
display: inline-block;
border-radius: 5px;
border: 1px solid white;
height: 15px;
width: 15px;
vertical-align: middle;
}
.right-itemsreceived span{
vertical-align: middle;
padding-left: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="body-manage-attendees">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col" class="number">Number</th>
<th scope="col" class="table2">Table</th>
<th scope="col" class="status">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Eve Doe</td>
<td class="number1">250</td>
<td class="table1">4</td>
<td class="right-itemsreceived">Items Received</td>
</tr>
<tr>
<td class="left">Fred Doe</td>
<td class="number1">250</td>
<td class="table1">2</td>
<td class="right-itemsreceived"><div class="square"></div><span>Items Received</span></td>
</tr>
<tr>
<td class="left">Fred Doe's Guest 1</td>
<td class="number1">250</td>
<td class="table1">2</td>
<td class="right-itemswaiting"> Items Waiting</td>
</tr>
<tr>
<td class="left">Jack Doe</td>
<td class="number1">14</td>
<td class="table1">4</td>
<td class="right-unpaid">Unpaid</td>
</tr>
</tbody>
</table>
</div>

Answer 2

.body-manage-attendees .right-itemsreceived::before {
content: url(image.jpg); /* Insert content image here*/
padding-right: 8px;
color: red;
}

Answer 3

Well you can start of by using the div Function
So here is a Exemple
.square {
width: 50%;
background: #000;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
<div class="square">
</div>
So Here is a Exemple
and now with your Code : You can see Here on JSFIDDLE
ofc you can play around with the code and add boostrap this is just to get you started

Answer 4

<div class="body-manage-attendees">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col" class="number">Number</th>
<th scope="col" class="table2">Table</enter code hereth>
<th scope="col" class="status">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Eve Doe</td>
<td class="number1">250</td>
<td class="table1">4</td>
<td class="right-itemsreceived">
<input type ="checkbox"/><span style="padding-left:15px">Items Received<span></td>
</tr>
<tr>
<td class="left">Fred Doe</td>
<td class="number1">250</td>
<td class="table1">2</td>
<td class="right-itemsreceived">
<input class="right-itemsreceived" type ="checkbox"/><span style="padding-left:15px">Items Received<span></td>
</tr>
<tr>
<td class="left">Fred Doe's Guest 1</td>
<td class="number1">250</td>
<td class="table1">2</td>
<td class="right-itemswaiting"><input type ="checkbox"/><span style="padding-left:15px"> Items Waiting</td>
</tr>
<tr>
<td class="left">Jack Doe</td>
<td class="number1">14</td>
<td class="table1">4</td>
<td class="right-unpaid"><input type ="checkbox"/><span style="padding-left:15px">Unpaid</td>
</tr>
</tbody>
</table>
</div>
Just add these changes to your code to add checkbox to your table data
or just look here https://jsfiddle.net/nc2djn5p/151/ for the demo