Creating a Table with HTML and CSS

I am struggling to include a column span paragraph in my table and then display the actual table values below it

You can see what I am attempting to achieve in this image

https://i.sstatic.net/VpmTH.png

<table>
      <thead>

        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>

        <tr>
          <td>
            WHATEVER TEXT
          </td>
          <tr>
            <td>He</td>
            <td>He</td>
            <td>He</td>
          </tr>

        </tr>

      </tbody>
    </table>

htmlcss

Answer №1

Include an additional td in the table for the # column, and then apply colspan="4" to the description cell:

th, td, tr {
  border-color: black;
  border-style: solid;
  text-align: center;
}

tr {
  border-width: 0 1px;
}

th {
  border-width: 1px 0;
}

td {
  border-width: 0 0 1px;
}

td[colspan] {
  border: none;
}

table {
  border-collapse: collapse;
}
<table>
  <thead>

    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td colspan="4">
        INSERT TEXT HERE
      </td>
    </tr>
    <tr>
      <td></td>
      <td>He</td>
      <td>He</td>
      <td>He</td>
    </tr>

  </tbody>
</table>

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

Tips for adding CSS styling to the action button within the ShinyWidgets package in Shiny applications

I have created a shiny app example below. In order to align the actionButton with selectInput, I had to include style='margin-top:25px'. The Shinywidgets package offers actionBttn widgets with predefined styles. For instance, I prefer the one wit ...

cssrshinyshinydashboardshinywidgets

Backgrounds filled by nested <li> elements inside another <li> element

My website features a sidebar menu with nested lists. When hovering over a list item, a sub-list appears. However, I am having an issue where the background color fills the entire sub-list instead of just the first list item. See the images below for clari ...

htmlcss

The relative pathway is functional for displaying images in the CSS file, however, it does not work in the

Okay, I am going to rewrite this... I am currently working on a project that consists of two layers. The top layer involves HTML5 animations such as rollovers and slides, while the bottom layer features kaleidoscope animation using images and CSS. The is ...

javascriptcsshtmlrelative-path

Steps to import shared CSS using Styled-components

In my project using react, I've implemented styled-components for styling. One requirement is to have a shared loading background. Here is the code snippet of how I defined it: const loadingAnimation = keyframes` 0% { background-position: 95% 95%; } ...

javascriptcssreactjsstyled-components

Creating a customized CSS selector to pinpoint distinct values among numerous elements sharing a common name

There are 6 buttons on the page layout, all named "Add content" and belonging to the class "addContent". In order to perform separate tasks, I need to click on each button one at a time using Webdriver. The buttons are nested deep within div's that ha ...

htmlseleniumcollectionsselenium-webdrivercss-selectors

Linking an element's class to the focus of another element in Angular

In my Angular application, I have multiple rows of elements that are wrapped with the myelement directive (which is a wrapper for the input tag). To highlight or focus on one of these elements at a time, I apply the .selected class in the styles. Everythi ...

javascripthtmlcssangularjs

Arrange a group of users in the middle

Looking for some help with this specific code snippet .selection_user { display: block; background-color: #2D2C31; text-align: center; line-height: 75px; } <div class="select_user_menu"> <div class="selection_user">User1</div> ...

htmlcss

How can I trigger a function once ng-show has finished executing?

I have an HTML table and buttons with the attribute ng-show=some_property. What I am trying to achieve is: I want Button1 to reveal a table containing field1, and I would like to change the focus directly from Button1 to field1. However, I am encounterin ...

javascripthtmlangularjsng-show

Verify role declarations and display components if valid

I am currently developing an application using Angular on the front-end and ASP.NET on the back-end. Within this application, there are two roles: user and admin. I have implemented a navigation bar with several buttons that I need to hide based on the use ...

javascripthtmlangular

Tips for choosing an <li> element with JavaScript

<style> .sys_spec_text{} .sys_spec_text li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline:none;} .sys_spec_text li a{ color: #db0401; height:24px; padding:1px 6px; border:1px solid #ccc; background:#fff; dis ...

javascriptjqueryhtmlcss

Is the first child component of Material UI Stack not properly aligned?

Is there a CSS issue that needs fixing? I am working on creating a vertical list of checkboxes with labels using the <Stack /> component from Material UI. I have tried implementing this in the sandbox provided (check out demo.tsx): https://codesandb ...

cssreactjsmaterial-ui

Styling the active selection in nav class with bold attribute in Bootstrap/AngularJs

How can I apply the bold attribute to the currently selected nav bar item? <ul class="nav"> <li role="presentation" ng-repeate="item in items" ng-class="{'active':navLink == item.header}"> </li> &l ...

javascripthtmltwitter-bootstrapcss

Trouble with CSS full height implementation within a scrolling container

I have been grappling with this straightforward issue for quite some time now. It seems to be a unique problem as I couldn't uncover a similar one online. My goal is to set the height of the green bar to 100% (to match the height of the red parent el ...

javascripthtmlcss

Steps for implementing scroll-based pagination in a select dropdown

HTML <select class="form-control choice requiredField" id-available name="SelectData" ng-model="box.box_id" title="Select"> <option value="" disabled selected>{{'_SELECT_BEACON_' | i18n}}</option> <option value="{{y. ...

htmlangularjshtml-selectdropdown

Java - Tapestry - The HTML output from the database does not render the <br> tags as line breaks

I am in the process of developing a news system for my web application. As part of this, I have implemented a function in Java that replaces all newline characters ("\n") with HTML line breaks ("< br>"). Consequently, the description column of m ...

javahtmlsqltapestry

Restricting the number of times a user can click on

I am currently displaying a table with data obtained from a database query. The structure of the table is outlined below: <table id="dt-inventory-list" class="table table-responsive"> <thead> <tr> <th>Field ...

javascriptjqueryhtmldatatable

How to style date strings in JavaScript, jQuery, or CSS

Below are dates that need formatting: 7-sep, 14-sep, 21-sep, 28-sep, 5-oct,12-oct, 19-oct,26-oct, 2-nov, 9-nov, 16-nov, 23-nov,30-nov, 7-dec,14-dec, 21-dec,28-dec-2013. Is there a way to tidy them up using JavaScript, jQuery, or CSS? Ideally, I would lik ...

javascriptjqueryhtmlcss

Differences in heights of the Bootstrap carousel in a responsive mobile view

My website features numerous carousel sliders that function perfectly on PC, but appear unappealing on mobile devices. The issue at hand is as follows: Imagine each carousel slide contains a maximum of 4 images, all within a col-md-3.col-12 div. <div ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Looking for a unique Full Screen Crosshair Cursor with either HTML5 or JQuery?

We've all seen that iconic military crosshair cursor in movies and animations. One example can be found at the beginning of a YouTube video titled "Dishonorable Disclosures" - https://www.youtube.com/watch?v=X-Xfti7qtT0 Another instance is with the ...

htmljqueryfullscreenmouse-cursorpanning

Is there a way to automatically add a div to the window as the user scrolls and then hide the div when they scroll back to the

Seeking assistance with creating a function that will add a 'sticky' class to the menu when the user scrolls down to the middle, and then append a div when the 'sticky' class is present. Currently facing issues where the div keeps appen ...

javascriptjqueryhtmlcss