Flexbox allows you to easily manage the layout of your website

I am currently working on a CSS project and have encountered an issue. Whenever I apply the "display: flex" property to the .student element, the border around it mysteriously doubles. The reason for wanting to use the flex property is to align the text vertically next to the image within the .student table data cell. Is there any way to eliminate this frustrating double border? Removing the display:flex property gets rid of the double border, but then the text and image are no longer aligned vertically. I've experimented with whitespace, border collapse, and various other solutions, but nothing seems to work.

Check out the code live here: https://codepen.io/dansbyt/pen/dyvoejG?editors=1100

CSS:

/* ------------{GRADEBOOK}------------ */
.gradebook {
  position: absolute;
  top: 60px; left: 0;
  width: 100vw; height: calc(100vh - 126px);
  overflow-y: scroll;
  box-sizing: border-box;}

/* Table styling*/
table {table-layout: fixed; border-collapse: collapse;}

/* Table heading styling */
thead th {
  height: 60px; width: 100px;
  top: 0; z-index: 2;
  position: -webkit-sticky; position: sticky;
  border-right: 1px solid gray;
  background-color: white;}
thead th:first-child {left: 0; z-index: 10;}

th {
  padding: 10px 16px;
  text-align: left;
  font-weight: normal;
  color: gray}

table .duedate {font-size: 14px; margin-bottom: 8px}
table .title {font-size: 18px; color: #5B7042}

/* Table data styling */
td {
  text-align: center;
  border: 1px solid gray;
  background-color: white}
td.late{background-color: #EA5D6B}

td input {
  text-align: center;
  padding: 4px; margin: 0;
  width: 114px;
  border: none;}
  
/* Student Name styling */
.student {
  padding: 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center}

.pic{
  display: inline-block;
  width: 25px;
  clip-path: circle();
  margin-right: 10px;}
  .pic img{display: none}

/* ------------{CONTROLS}------------ */
.controls {
  display: flex;
  position: absolute;
  bottom: 10px; left: 0;
  width: 100vw; height: 56px;
  border-top: 1px solid #DDDDDD}

HTML:

<link rel="stylesheet" href="../style.css">

<div class='gradebook'>
  <table>
    <thead>
      <tr>
        <th style='width: 200px'></th>
        <th>
          <div class='duedate'>Due Oct 08</div>
          <div class='title'>Mayflower Vocabulary</div>
        </th>
        <th>
          <div class='duedate'>Due Oct 15</div>
          <div class='title'>Wax Museum</div>
        </th>
        <th>
          <div class='duedate'>Due Oct 15</div>
          <div class='title'>American Revolution</div>
        </th>
        <th>
          <div class='duedate'>Due Oct 27</div>
          <div class='title'>Jamestown</div>
        </th>
        <th>
          <div class='duedate'>Due Nov 1</div>
          <div class='title'>Comparing Colonies</div>
        </th>
      </tr>
    </thead>
    <tr>
      <td class='student'>
        <img class='pic' src='../pics/default.png'>
        <span>Jane Doe</span>
      </td>
      <td><input type='text' value='-'></td>
      <td class='late'><input type='text' value='10'></td>
      <td><input type='text' value='9.5'></td>
      <td><input type='text' value='10'></td>
      <td><input type='text' value='5'></td>
    </tr>
    <tr>
      <td class='student'>
        <img class='pic' src='../pics/default.png'>
        <span>John Doe</span>
      </td>
      <td><input type='text' value='-'></td>
      <td><input type='text' value='8'></td>
      <td><input type='text' value='9'></td>
      <td><input type='text' value='10'></td>
      <td class='late'><input type='text' value='9'></td>
    </tr>
  </table>
</div>

<div class='controls'>
</div>

See the image of the issue here: https://i.sstatic.net/1nfZs.png

htmlcssflexbox

Answer №1

It seems that the issue stems from a clash between the table and flex layout algorithms. The td element is designed for tables, so adding flex properties to it causes problems.

The solution is to wrap the content of the td element with a div and apply flex to that div instead.

table{
  border-collapse: collapse;
}

td{
  border: 1px solid;
}

.flex{
  display: flex;
}
<!DOCTYPE html>
<html lang="en">
    <body>
        <table>
            <th>flex</th>
            <th>flex</th>

            <tr>
                <td class='flex'>...</td>
                <td>...</td>
            </tr>
            <tr>
                <td>...</td>
                <td class='flex'>...</td>
            </tr>
        </table>
        
        <table>
            <th>div flex</th>
            <th>div flex</th>

            <tr>
                <td> <div class='flex'>...</div></td>
                <td> <div class='flex'>...</div></td>
            </tr>
            <tr>
                <td> <div class='flex'>...</div></td>
                <td> <div class='flex'>...</div></td>
            </tr>
        </table>
    </body>
</html>

Answer №2

Instead of the usual border: 1px solid gray, you may want to experiment with this alternative approach.

td {
  text-align: center;
  border: 1px solid gray;
  border-bottom: 0;
  border-right: 0;
  background-color: white
}

tr:last-of-type td {
  border-bottom: 1px solid gray;
}

td:last-of-type {
  border-right: 1px solid gray;
}


/* ------------{GRADEBOOK}------------ */

.gradebook {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100vw;
  height: calc(100vh - 126px);
  overflow-y: scroll;
  box-sizing: border-box;
}


/* Table styling*/

table {
  table-layout: fixed;
  border-collapse: collapse;
}


/* Table heading styling */

thead th {
  height: 60px;
  width: 100px;
  top: 0;
  z-index: 2;
  position: -webkit-sticky;
  position: sticky;
  border-right: 1px solid gray;
  background-color: white;
}

thead th:first-child {
  left: 0;
  z-index: 10;
}

th {
  padding: 10px 16px;
  text-align: left;
  font-weight: normal;
  color: gray
}

table .duedate {
  font-size: 14px;
  margin-bottom: 8px
}

table .title {
  font-size: 18px;
  color: #5B7042
}


/* Table data styling */

td {
  text-align: center;
  border: 1px solid gray;
  border-bottom: 0;
  border-right: 0;
  background-color: white
}

tr:last-of-type td {
  border-bottom: 1px solid gray;
}

td:last-of-type {
  border-right: 1px solid gray;
}

td.late {
  background-color: #EA5D6B
}

td input {
  text-align: center;
  padding: 4px;
  margin: 0;
  width: 114px;
  border: none;
}


/* Student Name styling */

.student {
  padding: 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-bottom: -1px;
}

.pic {
  display: inline-block;
  width: 25px;
  clip-path: circle();
  margin-right: 10px;
}

.pic img {
  display: none
}


/* ------------{CONTROLS}------------ */

.controls {
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100vw;
  height: 56px;
  border-top: 1px solid #DDDDDD
}
<link rel="stylesheet" href="../style.css">

<div class='gradebook'>
  <table>
    <thead>
      <tr>
        <th style='width: 200px'></th>
        <th>
          <div class='duedate'>Due Oct 08</div>
          <div class='title'>Mayflower Vocabulary</div>
        </th>
        <th>
          <div class='duedate'>Due Oct 15</div>
          <div class='title'>Wax Museum</div>
        </th>
        <th>
          <div class='duedate'>Due Oct 15</div>
          <div class='title'>American Revolution</div>
        </th>
        <th>
          <div class='duedate'>Due Oct 27</div>
          <div class='title'>Jamestown</div>
        </th>
        <th>
          <div class='duedate'>Due Nov 1</div>
          <div class='title'>Comparing Colonies</div>
        </th>
      </tr>
    </thead>
    <tr>
      <td class='student'>
        <img class='pic' src='../pics/default.png'>
        <span>Jane Doe</span>
      </td>
      <td><input type='text' value='-'></td>
      <td class='late'><input type='text' value='10'></td>
      <td><input type='text' value='9.5'></td>
      <td><input type='text' value='10'></td>
      <td><input type='text' value='5'></td>
    </tr>
    <tr>
      <td class='student'>
        <img class='pic' src='../pics/default.png'>
        <span>John Doe</span>
      </td>
      <td><input type='text' value='-'></td>
      <td><input type='text' value='8'></td>
      <td><input type='text' value='9'></td>
      <td><input type='text' value='10'></td>
      <td class='late'><input type='text' value='9'></td>
    </tr>
  </table>
</div>

<div class='controls'>
</div>

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

Volume slider missing on Handel?

I'm having an issue with my volume slider in jQuery - the handle is not showing up despite it working. Any suggestions on how to make the handle visible? The jQuery I have imported: <script src="jquery-3.4.1.min.js"></script> <script ...

jqueryhtmlcssjquery-ui

What is the best way to make a scrollable div with top and bottom padding without adding extra elements inside?

I have created a fiddle to demonstrate my question. Essentially, I am looking to create a scrollable container with padding at the top and bottom that remains visible during scrolling, ensuring there is always a consistent distance from the edge to the con ...

htmlcss

Adjust the text area to automatically expand or shrink based on the text it contains

Is there a way to automatically adjust the size of a textarea based on its content? Here is the code I am currently using for this purpose: var element = document.getElementById(event.target.id); var content = $(this).val().trim(); if (content == "") { ...

javascriptjqueryhtmlcss

Confusion between Codeigniter's URL and base_url() function

$config['base_url'] = 'localhost/project'; <link href="<?= base_url(); ?>/css/bootstrap.min.css" rel="stylesheet"> An issue arises with the CSS not loading on the view due to a double '/' in the URL. This occur ...

phphtmlcsscodeigniter

What is the best way to display data from an Excel spreadsheet on my website?

I'm faced with a challenge in my Excel spreadsheet- I have a mix of numbers and text that I want to turn into graphical representations on a webpage. I'm considering using Python or PHP to achieve this as HTML alone doesn't seem up to the ta ...

pythonphphtml

Eliminating the unwanted line breaks that are automatically inserted when integrating JavaScript with HTML code

Hey everyone, I'm new to web development and could really use some assistance. I am currently working on a website that shows the weather forecast for the next four days, using SimpleWeather.js. In my JavaScript, I want to display the High & Low temp ...

javascripthtmlcsslineline-breaks

Animating the opacity of elements using jQuery and CSS

Trying to put together a fading slideshow with five slides that will loop back to the beginning. My code seems like it should do the trick, but there's something not quite right. <script type="text/javascript"> $(document).ready(function( ...

javascriptjquerycss

trigger a function when the iframe is altered

I am currently working on creating a function that can process credit card payments using an iframe. The challenge I am facing at the moment is dealing with error messages appearing in a less than ideal manner. Photo: I have been attempting to capture the ...

javascriptjqueryhtmliframe

Creating a dynamic side navigation menu that adjusts to different screen sizes

I have been working on a project's webpage that was initially created by another Software Engineer. After he left, I continued to work on the webpage. The issue I encountered is that he preferred a side menu over a navbar using the left-panel and righ ...

javascriptjqueryhtmlcss

Unforeseen Issues Arising from Media Queries

Trying out some new styling for different screen sizes based on the bootstrap grid system dimensions. Facing an issue where only certain styles apply while others don't seem to take effect. Here's a snippet of the CSS: @media only screen and ( ...

htmlcsstwitter-bootstrap

The issue of a malfunctioning Customized Bootstrap Carousel when used with flex and gap is causing

I have created a unique bootstrap carousel where instead of displaying one div, I showcase three (one in the middle and half of each on the sides). The issue arises when I add borders to my divs and attempt to create spacing between them using display: fle ...

csssassbootstrap-5

Expanding Side Panel feature in Bootstrap 4+

Attempting to create a collapsible sidebar using Bootstrap 4+. I managed to find code for Bootstrap 3.7.3 from here, but after converting it to Bootstrap 4+, the layout doesn't appear as intended. I'm not well-versed in HTML styling and would gre ...

jquerycssbootstrap-4sidebar

Flip an image by analyzing the colors beneath it

Looking for a way to invert the color of specific areas under a mask (PNG) for a floating menu. Rather than inverting all at once, I want only certain parts to be inverted underneath the mask. Is this achievable, or is there another approach I should consi ...

javascriptjquerycsshtml

Generating random images using Javascript

I am facing some challenges while creating my first custom JavaScript function. My goal is to display three random thumbnails on my webpage by selecting images from a pool of options. However, I am encountering issues with duplicated images and handling s ...

javascripthtmlloopsconditional-statements

Discover the power of catching Custom DOM Events in Angular

When working with an Angular library, I encountered a situation where a component within the library dispatches CustomEvents using code like the following: const domEvent = new CustomEvent('unselect', { bubbles: true }); this.elementRef.nati ...

javascripthtmlangulartypescript

Swapping out a sequence of characters in a web address with a different set

Swapping out imgur for filmot, Enter URL - https://i.stack.imgur.com/Uguvn.jpg Click the submit button After clicking submit, a new tab should open with the link .filmot.com/abcde.jpg. <html> <head> <title>input</title> <sc ...

javascripthtml

What is the best way to retrieve the values from the labels for two separate buttons?

I designed a pair of buttons with a single label below. Both buttons acted as standalone entities. <label for="buttons" class ="val">0</label> <input class="btn btn-primary button1" type="button" ...

javascripthtmljquery

Using an icon font as a background in CSS attribute

I am struggling to replace a background image in CSS with an icon font instead of an icon image. I have been unable to accomplish this task. Here is the CSS property I am working with: .social-networks .twitter{background:url(../images/social/twitter.png) ...

htmlcsswordpressicons

Problem with CSS transition on horizontal scrolling list items

I am currently working on a horizontal list with list items. When I hover over the list, it is supposed to expand horizontally to display more information, although this feature has not yet been implemented. However, I am having trouble understanding why ...

csscss-transitionscss-animationsmousehover

Shifting a static-width table within a predetermined width container

Unable to modify the HTML code for this project, I am in need of a CSS-only solution. Dealing with an unpleasant HTML structure that is causing some issues. A side by side comparison on fiddle shows where I'm currently at in the process. The challeng ...

htmlcss