The number of columns in the table do not match

Observing the table below, it appears that although I have used colspan="4" for two td elements, they are not equal in width. The first column seems to be wider than the second. What might be causing this discrepancy?

<table border="0" cellpadding="0" cellspacing="0">         
            <tr><td colspan="8" style="height:10px;">&nbsp;</td></tr>
            <tr><td colspan="8" style="height:10px;">&nbsp;</td></tr>
   <tr>
      <td style="position: relative; font-size: 14px;" colspan="8">
         text
      </td>
   </tr>
  
   <tr><td colspan="8">&nbsp;</td></tr>
            <tr>
                <td colspan="4">
                    To:
                </td>
                <td colspan="4">
                    From:
                </td>
            </tr>
            <tr>
                <td colspan="4">
                   text<br>
                   text<br>
                   text<br>
                   text
                </td>
                <td colspan="4">
                   text<br>
                   text<br>
                   text<br>
                   text
                </td>
            </tr>
  //in the same way other rows
  </table>
It looks like this: https://i.sstatic.net/3cpoF.png

csshtml-table

Answer №1

It seems you were unsure of the intended meaning, so I took a stab at it by adding a colgroup to enhance clarity and updating the HTML5 deprecated attributes.

table {
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100px; /* Needs to be greater than 'From:' size */
}
td {
  padding: 0;
}
<table>
  <colgroup>
    <col span="4" style="background-color:red">
    <col span="4" style="background-color:yellow">
  </colgroup>
  <tr>
    <td colspan="8" style="height:10px;">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="8" style="height:10px;">&nbsp;</td>
  </tr>
  <tr>
    <td style="position: relative; font-size: 14px;" colspan="8">
      text
    </td>
  </tr>

  <tr>
    <td colspan="8">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4">
      To:
    </td>
    <td colspan="4">
      From:
    </td>
  </tr>
  <tr>
    <td colspan="4">
      text
      <br>text
      <br>text
      <br>text
    </td>
    <td colspan="4">
      text
      <br>text
      <br>text
      <br>text
    </td>
  </tr>
</table>

Upon reviewing your image, I recommend the following structure:

table {
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%; /* Needs to be greater than 'From:' size */
}
td {
  padding: 0;
}
caption {
  color: #002B7F;
  font-weight: bold;
}
caption,
th {
  text-align: left;
}
thead {
  background-color: #007C66;
  color: white;
}
<table>
  <caption>text</caption>
  <thead>
    <th>To:</th>
    <th>From:</th>
  </thead>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
</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

Ways to confirm my CSS modifications in Chrome Developer Tools

I find myself tweaking the CSS of various elements using dev tools. After making multiple changes, I often lose track of where I have applied new styles to the elements. Is there a way to easily compare the current styles with the original styles on the ...

cssgoogle-chrome-devtools

Expand Elements to occupy entire width

My CSS skills are still in the early stages. I haven't delved too deeply into it. I have a query regarding how to achieve full width for an element. I've included my code below, but the basic approach I tried using 'width: 100%' didn&a ...

javascriptcssreactjsreact-native

Is there a way to create unique animations for CSS drop down div

I've been attempting to implement a hover effect on my drop-down cart that makes it fade or slide up similar to submenus. But, CSS transitions are not my forte! I've tried using generic fades with the transition property, but no luck. Currently ...

htmlcsstwitter-bootstrapbootstrap-4

Can you explain the purpose of the spaces on the buttons?

mysterious button spacing issue <div class="buttons"> <button id="btn-search" type="submit">Search Engine</button> <button id="btn-lucky" type="submit">Feeling Lucky Today</button> </div> .buttons { max-width: 29 ...

htmlcss

Which Javascript/Css/HTML frameworks and libraries would you suggest using together for optimal development?

Interested in revamping my web development process with cutting-edge libraries, but struggling to navigate the vast array of tools available. The challenge lies in finding a harmonious blend of various technologies that complement each other seamlessly. I& ...

javascripthtmlcssframeworks

The make-xx-column() mixins in Bootstrap are malfunctioning

After careful examination, it looks like some of the Bootstrap mixins are not functioning as expected. Specifically, the .make-md-column() and .make-sm-column() seem to have no effect at all. Initially, I suspected that WebEssentials was not compiling the ...

csstwitter-bootstrapless

Using jQuery and Regular Expressions to modify the styling of the initial few words

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor ...

jquerycssregex

Pass SASS/SCSS variables to Javascript without the need to export them to CSS files

Context Let's take a look at the _variables.scss file below: /* Setting up color variables */ $white: #fff; $black: #000; $grey: #ccc; // and so on... // Export the color palette for Javascript accessibility :export { white: $white; ...

javascriptcssvue.jssass

What are the best ways to creatively design HTML content generated using JavaScript?

I am currently using Squarespace 7.1 to create a website that features a randomly generated quote in the footer section. The quote is generated from a JavaScript array when the page loads, reloads, or changes. Despite the code functioning as intended (test ...

javascripthtmlcssarrayssquarespace

Eliminate jQuery's delayed blinking effect with the use of an event

Utilizing the mouseenter and mouseleave events, I have implemented a functionality to add a button (not actually a button) to an <li>. However, there seems to be a problem with my code. The button appears and disappears on mouseleave and mouseenter, ...

javascriptjqueryhtmlcss

The issue with setting width using % in React Native is causing trouble

While working on my project using expo react native, I encountered an issue with a horizontal scrollview for images. When I style the images using pixels like this: <Image code... style={{width: 350}}/>, everything works fine. However, if I try to ch ...

javascriptcssreactjsreact-nativemobile

Ensure the content is optimized for all screen sizes, utilizing Bootstrap to adapt accordingly

I have a webpage with a header, a footer, and a container id="item" that contains a list of four items with their respective logos. I am attempting to make the item container responsive based on the screen size so the entire page fits the screen without re ...

javascripthtmlcsstwitter-bootstrap

Utilizing jinja2 to showcase images within a template's CSS

Working on a flask project, I've integrated a visually appealing front-end design from codepen.io into my HTML template using BeautifulSoup. The design can be found here. I have a list of images obtained through web scraping that I want to display in ...

cssflaskweb-scrapingbeautifulsoupjinja2

Is it possible to apply the same styling to multiple elements simultaneously in jQuery by grouping them as in CSS?

Keeping code neat is essential. In CSS, elements can be grouped like this: .element1, .element2, .element3, .element4, .element5, .element6 { font-weight:bold; } I am curious if there is a similar method in jQuery or if each element needs to be set indi ...

jquerycssreadability

Optimizing CSS to eliminate extra space from the first button in the navigation menu bar

I'm currently working on creating a simple CSS-based navigation bar, but I've encountered an issue. The first item in my HTML list seems to have extra space to its left that I can't seem to remove. Check out the live example here Also avai ...

htmlcssnavigationuinavigationbar

What is the best way to replicate a CSS zoom effect in Firefox?

After implementing this code for a menu on my website, I noticed that it is not compatible with Firefox when testing it across different browsers. li { display: inline-block; list-style: none inside none; text-align: center; } li a:before { ...

htmlcssfirefoxzoomingscale

Bootstrap form validation solution

Utilizing bootstrap validation to validate a jsp page. The folder structure is as follows: WebContent ├── bootstrap-form-validation ├── js └── pages All three folders are under the web content. If I create another folder called teacher ...

javascriptjqueryhtmlcsstwitter-bootstrap

Instructions on setting a photo as a background image using a text-based model

I'm a beginner with Angular so I may have a simple question. I am using an image from the Google API, which is not a URL. How can I set this image as the background-image in a CSS tag that only accepts URIs? Thank you! ...

cssangularionic-framework

Utilizing CSS for modifying spacing within a span element

I am facing a challenge with displaying a full name (firstName lastName) on a webpage. Within my JSP file, the code snippet looks like this: <span> <c:if test="${someCondition1}"> <c:out value="${firstName}"> </c:if&g ...

htmlcssjspjstlwhitespace

Modify the input value when using the get_search_form() function in Wordpress

After experimenting with the latest get_search_form() function in WordPress, I've encountered an issue where I can't figure out how to remove the text label from the search submit button. Does anyone have any suggestions or solutions for this pr ...

csswordpressinputsubmit