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:

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

Can you explain the distinction between using element~element versus element+element?

Can you explain the variation between these two CSS selectors? When using them, I seem to receive the same outcome. In the HTML: <div>One</div> <p>Two</p> CSS Example #1: div+p { background:red; } This code assigns a red backgr ...

csscss-selectors

What is the best way to conceal a sticky footer using another element?

I have a footer that remains fixed at the bottom of both long and short pages. Below is the CSS code for this footer: .footer{ position: absolute; bottom: 0; width: 100%; height: 100px; background-color: white; } My goal is to achieve a 'r ...

jqueryhtmlcssruby-on-rails

Navigation Bar Search Box Alignment Problem

Hi there, I'm new to programming and I'm trying to center my search bar with the navigation links beside it within a fixed navigation bar. However, I'm having trouble getting it to work properly. Can someone take a look at my HTML and CSS co ...

htmlcssnavigationsearchbarcenter-align

Can floated divs be prevented from collapsing without taking up any width?

Let's discuss an issue that is not related to block elements collapsing when their children are floated, and has nothing to do with clearing at all. Imagine having a set of floated divs like: <div class="column">Column 1</div> <div cl ...

cssfirefoxbrowsersafaricross-browser

A PHP string containing hashtags without spaces will not be parsed into individual hashtags

I have a challenge where I want to extract individual hashtags from a string that contains hashtags. Currently, I am utilizing the following code: preg_match_all('/#([^\s]+)/', $str, $matches); #test #test #test #example The code functio ...

phphtmlstringhashtag

The website is experiencing crashes in IE11 whenever the developer tools are closed

I'm experiencing an issue with my website where it crashes internet explorer if the developer tools are not opened. I have checked for console.log calls as a possible cause, but that doesn't seem to be the problem here. The error is not just di ...

htmlangularjsinternet-explorer

The combination of two colors in a hard background fails to create an appealing aesthetic

Seeking assistance with an issue I encountered while trying to create a two-color background. Below is the code snippet: body, html { height: 100%; width: 100%; background: #0000ff; background: linear-gradient(180deg, #ff0000 50%, #0000f ...

htmlcsslinear-gradients

Is there a way to enable text selection on a jQuery draggable div?

I utilized jQuery to make a specific div draggable, but I've encountered an issue. Inside this draggable box, there is some important text that I need to be able to copy and paste. However, whenever I click on the box, it triggers the dragging action ...

javascriptjqueryhtml

Steps to transfer the content of a label when the onclick event occurs

Seeking advice on how to send the dynamically varying value of a label upon clicking an anchor tag. Can anyone recommend the best approach to passing the label value to a JavaScript function when the anchor is clicked? Here is a sample code snippet: < ...

javascriptjqueryhtmlajax

Where is the appropriate location to insert a <script> tag in NextJs?

I am facing a challenge in my NextJs application when trying to include the <script> code. I attempted to add it in a .js file but it did not work as expected. In traditional React applications, we typically use the index.html file to incorporate sc ...

javascripthtmlreactjsnext.js

Dealing with models in Vue.js is proving to be quite a challenge

Why isn't myGame showing as 超級馬力歐 initially and changing when the button is pressed? It just displays {{myGame}} instead. I'm not sure how to fix it, thank you! let myApp = new vue({ el:'myApp', data:{ myGame:&a ...

javascripthtmlvue.js

forming a boundary that stands alone, unattached to any other boundaries

I am trying to design a navigation bar that resembles the one depicted in the image provided. The concept involves creating a navigation bar where each border is separated from the others, potentially achieved using hr tags. However, I am struggling to fi ...

htmlcssborder

Noticed a peculiar outcome when working with hexadecimal calculations in LESS. What could be causing this phenomenon?

I recently dove into the world of LESS and have found it to be quite interesting. However, I encountered a unique situation where a background color was assigned the code #03A9F4 - 100. Based on my limited knowledge of hexadecimal numbers from some IT clas ...

cssless

Linking jQuery UI tabs to tabs on a different pageWould you like assistance

I am facing a challenge that I need help with. For a school project, I have to create 8 pages of HTML, each with a template and a menu. The menu consists of tabs that are supposed to link to separate pages when clicked. However, the issue is that when I cl ...

jqueryhtmltabs

Having trouble showing table data in Angular

My goal is to showcase data from a table created using Spring-Boot Below is my model.ts: export class Quiz1 { QuestionId?: any; Question?: string; OptionsA?: string; OptionsB?: string; OptionsC?: string; OptionsD?: string;} He ...

htmlangulartypescriptspring-boot

Next.js is causing me some trouble by adding an unnecessary top margin in my index.js file

I started a new project using next.js by running the command: yarn create next-app However, I noticed that all heading and paragraph tags in my code have default top margins in next.js. index.js import React, { Component } from "react"; import ...

javascriptcssreactjsnext.jsjsx

Implement a slideshow feature that automatically changes a CSS attribute when preview images are shown

(Apologies for the perplexing title) My intention was to create a slideshow gallery, and I stumbled upon an example here: https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp In this setup, you'll notice previews of images in a small bar b ...

htmlcss

"Yakov's slender typefaces are appearing incorrectly on the screen

I recently tried to incorporate Yakov thin fonts using CSS @font-face, but I noticed that the fonts appear quite different from the original ones. Any idea why this might be happening? Below is the code snippet I used: @font-face { font-family:' ...

htmlcssfont-faceembedded-fonts

OpenLayers' circular frames surrounding the icons

I am currently using openlayers and trying to implement a feature that creates a circle around the icons on the map. I have been referring to this example on Stack Overflow but unable to draw the circle successfully. Can someone please assist me with this? ...

javascripthtmlmapsopenlayersopenstreetmap

Change the opacity of a DIV or any other element when hovering over it

I have successfully applied opacity: 1; to a paragraph when hovering over itself. However, I want the opacity to also change when hovering over the header above it. Here is my CSS code: .testH { font-family: impact; text-align: center; font-s ...

htmlcss