Creating a tiny square within a larger rectangle with text - a step-by-step guide

Below is a screenshot that I have recreated using HTML & CSS.

https://i.sstatic.net/6d3to.jpg

To view the recreated screenshot, check out this fiddle. Bootstrap 4 was used to create the table.

Here are some snippets of the HTML and CSS code used to create the rows:

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;
}



Challenge:

I am seeking advice on modifying the CSS codes above to ensure that the square box (indicated by an arrow in the screenshot) appears inside the colored rectangle.

htmlcssbootstrap-4rectangles

Answer №1

For more information, please take a look at this Fiddle I have made some adjustments to the CSS rules and updated the HTML structure for the colored rectangles.

// Custom CSS
.nav-top-searchbar {
    position: relative;
}

#ellipsis {
    top: 12px;
    position: absolute;
    right: 43px;
    cursor: pointer;
}

#ellipsis:focus {
    outline: none;
}

#ellipsis:focus+.dropdown {
    display: block;
}
...

<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>
            ...
        </tbody>
    </table>
</div>

Answer №2

.attendee-list .received-items::before {

   content: url(image.jpg); /* Image placeholder */
    padding-right: 8px;
    color: blue;

}

Answer №3

To begin, you can utilize the div Function

For example:

.square {
  width: 50%;
  background: #000;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
<div class="square">
     
</div>

Here is an example:

Now, with your own code: check it out on JSFIDDLE

Feel free to experiment with the code and incorporate Bootstrap - this is just a starting point.

Answer №4

<div class="attendees-section">
    <table class="attendees-table">
        <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>

Make sure to enhance your code by including checkboxes in the table data

If you need a visual guide, check out this demo here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I remove all Solr records except for those in a specific array?

I have been utilizing the SolrPhpClient to interact with Solr. Executing queries is a breeze, such as this example: $solr->deleteByQuery("id: 12345") However, I am curious if anyone has discovered a method to remove all entries from a Solr index ...

phpmysqlhtmldatabasesolr

Is there a way to resolve the issue of the hero image appearing behind the text box without relying on media queries?

I have a hero image with a text box overlapping the hero slightly. However, when I add content below the box, it appears under the text box. While my code includes some media queries that work well, I believe there must be a way to encapsulate the hero and ...

htmlcssflexbox

Obtaining the identifier of an object within the canvas

Initially, I had written a JavaScript script that I am currently transforming into an HTML5 canvas project. In my original setup, I had: <p id = "collision">Test</p> function checkHit(){ if (my conditions) { document.getElementByI ...

javascriptjqueryhtml

Align the active li vertically within the ul

Looking to create a layout similar to musixmatch where the active verse is displayed at the center of the ul. https://i.sstatic.net/X7RV1.png I have experience doing this with JavaScript, but I'm curious if it's achievable using only CSS. < ...

css

Learn how to utilize ng-class to assign an ID selector to HTML elements

In my code, I have an icon that is displayed conditionally using ng-class. I am looking to include ID's for both the HTML elements. <i ng-show="ctrl.data.length > 1" ng-class="{'glyphicon glyphicon-chevron-down': !ctrl.isOpen, ...

htmlcssangularjsangularjs-ng-class

How can I turn off bi-directional data binding in Angular?

Utilizing Angular Material's md-dialog, when the user clicks the "edit" button to display the dialog, it takes the current object (a table row) and sends it to the function showDialog, populating the dialog fields with its values: <button ng-class ...

javascripthtmlangularjsmddialog

What could be causing the error message 'Uncaught SyntaxError: Identifier 'randFilmIndex' has already been declared'?

function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min) + min); } function arrayRemove(arr, value) { return arr.filter(function(ele){ return ele != valu ...

javascripthtml

PHP contact form malfunctioning

I've encountered an error with my PHP contact form code. Whenever I try to submit it, I receive the following message: " Parse error: syntax error, unexpected T_VARIABLE, expecting ')' in F:\wamp\www\peter harris\form.ph ...

phphtml

How can I stack right columns on top in Bootstrap grid collapse?

I recently discovered that I can rearrange my grid columns using the Bootstrap grid column ordering feature. However, I am facing a challenge as I cannot seem to figure out how to make the "right column first" only when it is collapsed. Currently, I have ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Why does this CSS ticker only display the first four posts?

Hello, I'm interested in adding a News Ticker to my Rails application. I came across this CSS ticker: I'm facing an issue where it only displays the first four posts. I believe the problem might not be with my data retrieval using the .each loop ...

htmlcssticker

What is the best method for utilizing the CSS :target selector in order to generate a versatile modal box?

I am looking for a way to display my vast collection of proverbs from an endangered language without overcrowding the page. I have implemented a modal box solution using CSS :target selector, which expands a hidden div element when clicked on. However, I n ...

htmlcss

Customize Bootstrap 4 scrollbar overflow with a sticky-top feature

Currently, I have a layout consisting of two rows: the first row is fixed to the top of the screen using sticky-top, and the second row fills the remaining height on the screen with min-vh-100. New content will be added dynamically to the second row's ...

htmljquerycssbootstrap-4

Utilize jQuery to encase the final word of a paragraph within span tags

Greetings! Consider the following HTML snippet: <p>Phasellus sit amet auctor velit, ac egestas augue.</p> I am interested in enclosing the last word within span tags to achieve the following result: <p>Phasellus sit amet auctor velit, ...

jqueryhtml

iPhone has trouble accessing alternative forms of content

<object width="300" height="100" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> <param value="5352f5c8e96c251fb9d79890f2294608.swf" name="movie"> <!--[if !IE]>--> <object width="300" height="100" data="5352f5c8e96 ...

iphonehtmlflashios

Aligning an image of variable size perfectly both in the center horizontally as well as vertically

After extensive research, I have come across numerous solutions to this issue, but none of them have proven effective in my specific scenario. Here is a JSFiddle link illustrating the problem at hand: http://jsfiddle.net/kr394ye2/1/ .classA { backg ...

htmlcss

Uneditable border in Bootstrap table

I am currently utilizing Bootstrap table to showcase some basic information, however, I am facing a peculiar problem. Upon using the bootstrap-table stylesheet, the table displays as desired without an outer border. However, upon initializing the styleshe ...

htmlcsstwitter-bootstraphtml-tablebootstrap-4

"Dynamic Entrance: Unveiling with Javascript on Page Load

I've been experimenting with getting a div to slide in on page load. The div has an id of "#crazyslide" and is positioned absolutely to the right at -800px in the CSS. After trying out this code in the head: <script type="text/javascript> $(do ...

javascripthtmlcssfunctionpageload

Tips on how to ensure a div expands to the width of its contents without wrapping, even if it is wider than its parent

Take a look at the code snippet on this jsfiddle link: https://jsfiddle.net/frpL3yr1/ The concept revolves around creating a bar of images positioned at the top of the screen. The img-wrapper div is intended to be animated using JavaScript, shifting leftw ...

htmlcss

Is there a method to transform the lower portion of a background image into a uniform white color?

Hey everyone! I'm a new user trying to work on my personal project. I was wondering if there's a way to use CSS to turn the bottom half of this image (link: ) completely white. Any tips or suggestions would be greatly appreciated! Thank you! ...

htmlcss

"Exploring Angular 9: A guide to retrieving form data with an array of objects [Revised as of July 29th, 2020

I am encountering an issue with my Angular 9 form code. I am getting the error "ERROR TypeError: Cannot read property 'mobile_number' of undefined" and I need help in resolving this problem. <form (ngSubmit)="processForm()"> & ...

htmlangulartypescriptangular-forms