issue arising where the table's border is not displaying

I'm confused about why the border of the first tbody tr's td is not visible.

https://i.stack.imgur.com/Fwlv7.png I can't see any reason why the border is not showing up.

Here's what I've figured out:

  1. If the natural height of th is greater than the fixed height for th, the first tbody tr's td will be visible.
  2. If there is no code th{height: xxpx;}, the first tbody tr's td will be visible.

.table {
  border-spacing: 0;
  border-collapse: collapse;
}

.table.summary-style
{
    font-size: 11px;

    width: 100%;

    table-layout: fixed;

    text-align: center;

    color: #666;
    border-bottom: 1px solid #666;
    background: #fff;
}

.table.summary-style caption
{
    font-size: 0;
    line-height: 0;

    display: none;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);

    width: 0;
    height: 0;
    margin: 0;
    padding: 0;

    opacity: 0;
}

.table.summary-style thead th
{
    font-size: 16px;
    line-height: 1;

    position: relative;

    box-sizing: border-box;
    height: 38px;
    padding: 5px 4px;

    text-align: center;
    vertical-align: middle;

    color: #666;
    background: #ddd;
}

.table.summary-style > tbody > tr > td
{
    font-size: 13px;
    line-height: 1.38;

    box-sizing: border-box;
    height: 36px;
    padding: 4px 10px;

    text-align: left;
    vertical-align: middle;

    color: #666;
    border-top: 1px solid #666;
    background: #fff;
}
<table class="table summary-style">
         
         
        <thead>
            <tr>
                <th scope="col">title</th>
                <th scope="col">title</th>
                <th scope="col">title</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="3">No Data.</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
        </tbody>
    </table>

csshtml-tableborder

Answer №1

The reason for this issue is that setting position: relative; on the .table.summary-style thead th elements causes them to appear above the borders of other elements. This occurs even when box-sizing: border-box; is applied, as the borders of table elements are collapsed together. To resolve this, you can either remove position: relative; from the first row or eliminate border-collapse: collapse; from the .table styling.

.table {
  border-spacing: 0;
  border-collapse: collapse;
}

.table.summary-style
{
    font-size: 11px;

    width: 100%;

    table-layout: fixed;

    text-align: center;

    color: #666;
    border-bottom: 1px solid #666;
    background: #fff;
}

.table.summary-style caption
{
    font-size: 0;
    line-height: 0;

    display: none;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);

    width: 0;
    height: 0;
    margin: 0;
    padding: 0;

    opacity: 0;
}

.table.summary-style thead th
{
    font-size: 16px;
    line-height: 1;

    box-sizing: border-box;
    height: 38px;
    padding: 5px 4px;

    text-align: center;
    vertical-align: middle;

    color: #666;
    background: #ddd;
}

.table.summary-style > tbody > tr > td
{
    font-size: 13px;
    line-height: 1.38;

    box-sizing: border-box;
    height: 36px;
    padding: 4px 10px;

    text-align: left;
    vertical-align: middle;

    color: #666;
    border-top: 1px solid #666;
    background: #fff;
}
<table class="table summary-style">
         
         
        <thead>
            <tr>
                <th scope="col">title</th>
                <th scope="col">title</th>
                <th scope="col">title</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="3">No Data.</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
        </tbody>
    </table>

Answer №2

Consider this code snippet for your table styling:

table,
td,
th {
  border-collapse: collapse;
  padding: 0.5em 1em;
  border: 2px solid black;
}

.table.summary-style {
  font-size: 11px;
  width: 100%;
  table-layout: fixed;
  text-align: center;
  color: #666;
  border-bottom: 1px solid #666;
  background: #fff;
}

.table.summary-style caption {
  font-size: 0;
  line-height: 0;
  display: none;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.table.summary-style thead th {
  font-size: 16px;
  line-height: 1;
  position: relative;
  box-sizing: border-box;
  height: 38px;
  padding: 5px 4px;
  text-align: center;
  vertical-align: middle;
  color: #666;
  background: #ddd;
}

.table.summary-style>tbody>tr>td {
  font-size: 13px;
  line-height: 1.38;
  box-sizing: border-box;
  height: 36px;
  padding: 4px 10px;
  text-align: left;
  vertical-align: middle;
  color: #666;
  border-top: 1px solid #666;
  background: #fff;
}
<table class="table summary-style">
        <thead>
            <tr>
                <th scope="col">Title</th>
                <th scope="col">Title</th>
                <th scope="col">Title</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="3">No Data.</td>
            </tr>
            <tr>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
            </tr>
            <tr>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
            </tr>
            <tr>
                <td>Content</td>
                <td>Content</td>
                <td>Content</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

Minification of CSS - Vuetify

While working on my Nuxt project with Vuetify, I noticed that the page source is quite lengthy with 26k lines of code, most of which is generated by Vuetify's CSS. On comparing it with other pages, I see shorter code with difficult-to-read CSS. Is the ...

cssvue.jsvuetify.jsnuxt.js

Tips for creating a "sticky" button in Angular that reveals a menu when clicked

Is there a way to incorporate a feature similar to the "Get help" button on this website: The button, located in the lower right corner, opens a sticky chat menu. I am interested in adding dynamic information to the button (such as the number of tasks a u ...

cssangular

Utilizing CSS to create dynamic 3D cube transformations

Exploring the realm of CSS 3D transforms to showcase cubes and cuboids featuring cross-sections has been my current venture. In this endeavor, I'm aiming at compatibility with Chrome, Firefox, and MSIE 11. It has come to my attention that in order to ...

htmlcss3d

Move a 'square' to a different page and display it in a grid format after clicking a button

I am currently developing a project that allows students or schools to add projects and search for collaborators. On a specific page, users can input project details with a preview square next to the fields for visualization. Once the user uploads the ...

javascripthtmlcssgridviewcss-grid

Exclude striped tr elements within a subtable

I have a main table (Maintable) containing information, with each row having a sub-table for additional details that can be collapsed if needed. I am trying to stripe the rows in the Main table but using `tr:nth-child(even)` is not working as it also affec ...

htmlcsshtml-tablecss-selectors

It is important for the button size to remain consistent, regardless of any increase in text content

My goal was to keep the button size fixed, even as the text on it grows. This is the current code I am using: .button { border: none; color: white; padding: 10px 50px; text-align: center; text-decoration: none; display: inline-block; font ...

javascripthtmlcss

Difficulty encountered in closing div by clicking the background with the help of jquery

I am facing a challenge with properly closing a div container and restoring it to its original state when I click outside of it. Despite trying various solutions from stackoverflow and extensive internet research, I have been unable to find or come up with ...

javascriptjqueryhtmlcssweb

An element featuring a background color is vertically aligned in the middle of its parent container

Struggling to achieve a seemingly simple task, but coming up short on finding a solution. The goal is to have a background-color that aligns vertically in the middle of the first and last images in a stack of images. It may sound more complicated than it a ...

javascripthtmlcssalignment

Implementing an unordered list in an inline format, even when it is collapsed with Bootstrap

Recently, I've been delving into Bootstrap and experimenting with coding a basic website. Below is the code for the navbar: <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class ...

htmlcsstwitter-bootstrapnavbar

Is setting the height to 100% a dependable option for container loading during the initial page rendering in CSS?

Upon arrival on the page, I envision the container containing the "search" to expand and occupy the entire screen. Seems simple enough: just set the height to 100%. If the user chooses to scroll down, they will see the rest of the content. It almost fee ...

htmlcssheight

Leveraging CSS attribute selectors within JSX using TypeScript

With pure HTML/CSS, I can achieve the following: <div color="red"> red </div> <div color="yellow"> yellow </div> div[color="red"] { color: red; } div[color="yellow"] { color: yellow; ...

htmlcssreactjstypescript

How to place a stylish font over an image and recreate hover effects

I am looking to place social media icons below an image next to the photo's title, including Facebook, Twitter, Soundcloud, and Instagram. I want these icons to rotate along with the image when it is hovered over. HTML <div class="polaroid-image ...

javascriptjqueryhtmlcssimage

Having trouble understanding why the border-radius attribute is not being applied to tables?

I've been trying to give the outer corners of tables a rounded appearance in HTML/CSS, but I can't seem to get the border-radius property to work properly. After inspecting the elements in Chrome's computed section, I noticed that the eleme ...

htmlcss

The key to highlighting the search terms in bold format

How can I highlight the search terms entered by users in the search box? I want all keywords in every search result to be bolded. For example, when a search term is entered and the results page displays all results with the typed term in bold within each ...

phpcsssql

"Enhance User Experience: Use CSS to highlight text selection based on

As a beginner in the world of css and html, I am eager to create a webpage that showcases a list of names with the ability to select one or multiple names. Instead of simply checking a box on the side, I would love for the background of the selected text t ...

jqueryhtmlcss

Having trouble adding a custom font with override to MuiCssBaseline in react-admin, the @global @font-face seems

I am attempting to integrate the NotoSansSC-Regular.otf font from Google into my react-admin application as the default font for simplified Chinese text. I have managed to make it work by including the fonts in the root HTML file using CSS, like this: ty ...

cssreactjsmaterial-uifont-facereact-admin

Concealing items in a loop using Javascript

I need assistance with this issue. I am trying to hide text by clicking on a link, but it doesn't seem to be working correctly. Even though I tried the following code, I can't figure out why it's not functioning as expected. Is there a diff ...

javascriptjquerycss

Utilizing pixel values for Material-UI breakpoints rather than using the default sm, md, lg, xl options

Below is the code snippet that I am using: [theme.breakpoints.only('lg')]: {} The above code works perfectly and shifts at the desired breakpoint. However, when I implement the following: [theme.breakpoints.between('1200', '1021&a ...

javascriptcssreactjsmaterial-uijss

Choose an item from the list and use the scrollbar when the menu opens

My select element has over 50 options, but the options popup and go off the page without a scroll bar. As a result, I can only see and select up to 20 options. Is there a way to make the select element display a vertical scroll bar when there are more tha ...

htmlcss

Tips for achieving consistent text and image alignment through CSS styling

My table currently contains a default profile image. Initially, there might not be any text content and I have set up the CSS styling to allow text to wrap around the default image. I am facing an issue when trying to position the image statically in a wa ...

htmlcsspositioning