The reasons behind the unsightly gaps in my table

Here is the HTML code snippet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
   <script type='text/javascript' src='js/jquery-1.10.2.min.js'></script>
   <script type='text/javascript' src='js/knockout-3.0.0.js'></script>
   <script type='text/javascript' src='js/myTasks.js'></script>
   <link rel="stylesheet" type="text/css" href="css/walk.css">
      <TITLE>Your Tasks</TITLE>
   </HEAD>
   <BODY>
    <div class="screenSection">
        <div class="sectionHeader">
            <p>Your Tasks</p>
        </div>
        <div class="lines">        

        <table class="dataTable" id="CADataTable">
<thead>
    <tr>
        <th style="width: 15em;"> Project name</th>
        <th style="width: 7em;"> Number</th>        
        <th style="width: 50em;"> description</th>
        <th style="width: 5em;"></th>
    </tr>   
</thead>
<tbody data-bind="foreach: Assimilation">
    <tr>
        <td><input type="text" name="Name" id="Name" data-bind="value: Name" style="width: 15em;"></td>
        <td><input type="text" name="Num" data-bind="value: Num" style="width: 7em;"></td>
        <td><input type="text" name="Desc" data-bind="value: Desc" style="width: 50em;"></td>
        <td style="width: 5em;">
                <img src="img/close.jpg" alt="Close" data-bind="click: $root.removeAssimilation"> 
        </td>
    </tr>
</tbody>
</table>
<button type="button" id="export" class="button" data-bind="click: newAssimilation">Add new row</button>


        </div>
    </div>
   </BODY>
</HTML>

Upon clicking the add new row button, an unexpected behavior occurs which results in some unwanted space being displayed.

This CSS is currently applied:

@CHARSET "UTF-8";

.formElement { height: auto; margin: 0 0.4em; padding: 0 0 0.5em 0.5em; min-width: 40%; display: inline-block;}
.formElement label {
    display: block;
    font-size: 1.7em;
    margin: 0.8em 0 0.1em 0.15em;
    width: 17.89em;
}
.formElement textarea { border: 1px solid #CCCCCC; padding: 2px; font-size: 1.15em; }
.formElement span { font-size: 1.05em; font-weight: bold; }
.lines { overflow: hidden; }
#commentInformation .formElement { width: 80%; }
input[type="text"] { border: 1px solid #CCCCCC; padding: 0.2em; height: 22px; width: 250px }
fileSelection { width: 50em; height: 30px; }
input:focus,textarea:focus,select:focus{
    -webkit-box-shadow:0 0 6px #007eff;
    -moz-box-shadow:0 0 5px #007eff;
    box-shadow:0 0 5px #007eff; outline: none; }
td
{
    background: #A9D0F5;
    text-align: center;
    height:2em;
}
th
{
    height:2em;
}

.trClass
{
height:2em;
    white-space: nowrap;
}

table
{
    width: 98%;
    font-size: 1.2em;
    clear: both;
}

The objective is to remove this excess blue space from the layout. However, identifying such issues can be challenging for a backend developer who is not well-versed in frontend development. Any assistance or guidance on rectifying this issue would be greatly appreciated!

EDIT:

Access JSFIDDLE link here

Answer №1

Take a look at this fiddle http://jsfiddle.net/37sbw/5/

To improve the appearance, you should delete the

       background: #A9D0F5;

that is currently applied to td elements.

Instead, keep it simple like this

 td
 {
    //background: #A9D0F5;
    text-align: center;
    height:2em;
 }

I've also included

  cellspacing="0px" 

within the table to eliminate spacing between cells.

If cellspacing doesn't work, try this instead

      table
     {
       border-spacing:0px;
     }

Answer №2

Set the Cell Spacing and Cell Padding to 0 pixels

Answer №3

It seems like you're saying that the input field is not taking up the full width of its parent element.

The issue may be due to inline styles overriding your external CSS.

<td><input type="text" name="Name" id="Name" data-bind="value: Name" style="width: 15em;"></td>
<td><input type="text" name="Num" data-bind="value: Num" style="width: 7em;"></td>
<td><input type="text" name="Desc" data-bind="value: Desc" style="width: 50em;"></td>
<td style="width: 5em;">
        <img src="img/close.jpg" alt="Close" data-bind="click: $root.removeAssimilation"> 
</td>

To fix this, remove all instances of style="" and consider updating your CSS with:

input[type="text"] {width: 100%;}

Answer №4

To remove the space between cells in your table, adjust the border-spacing property to 0:

table {
   width: 98%;
   font-size: 1.2em;
   clear: both;
   border-spacing: 0;
}

By doing this, you will eliminate any white space between the cells.

Check out this jsFiddle example for reference!

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 connect to a minimized hidden tabindex component using the hashtag symbol

I have created a glossary with terms in columns and hidden texts using plain css/html. Each entry is structured like this: A term followed by a hidden explanation, revealed on focus without the use of Java or JS. Instead of using :hover, I utilize :focus ...

Storing dynamically generated images into a database and linking them to an image button

Random rd = new Random(); string data = rd.Next(111111111, 999999999).ToString(); QRCodeGenerator q = new QRCodeGenerator(); QRCodeGenerator.QRCode qc = q.CreateQrCode(data, QRCodeGenerator.ECCLevel.Q); ...

Developing a perpetually scrolling container within a webpage

I am attempting to implement a scrollable div on my webpage that can continuously load content. I am currently using the following code snippet for this --> http://jsfiddle.net/cyrus2013/Qq85d/ $(document).ready(function(){ function loadMoreContent() ...

What steps do I need to take to create an animation where an outline gradually becomes filled in

I've been experimenting with creating a loading animation inspired by the pre-loading animation on this website. My attempt using chat GPT resulted in an unexpected outcome where, instead of filling the SVG, it placed a black square on top of it. The ...

See-through navigation bar custom-made for materializecss

I've been trying to make my navbar transparent using materializecss, but all my attempts so far have resulted in it turning white. Any suggestions would be greatly appreciated. Thank you! Here is the code I tried: <nav> <div class="nav-w ...

Toggle the visibility of all elements using jQuery by creating multiple buttons for each action

I have a group of 4 buttons that control the visibility of images on the page. Each button toggles between showing and hiding all images when clicked. When a button is clicked, it changes its text from "HIDE ALL" to "DISPLAY ALL." The issue I'm facin ...

Creating a Triangle Slider Component with React and Material-UI (MUI)

Struggling with creating a price control using react js and MUI, similar to the image below: https://i.stack.imgur.com/ZP8oc.png I've searched online for libraries or solutions, but haven't found anything that works. ...

A fresh javascript HTML element does not adhere to the css guidelines

While attempting to dynamically add rows to a table using Javascript and jQuery, I encountered an issue. Here is my code: <script> $(document).ready(function(){ for (i=0; i<myvar.length; i++){ $("#items").after('<tr class="item- ...

When using jQuery, the value of an input type text field remains constant despite any alerts

My issue involves an input text used to check if the corrected values are being displayed in an alert. However, when I modify a value in the form and check if the updated value appears in the alert box, it still shows the old value. Below is the relevant ...

Display the list items within a div only if the height is lower than a separate div

I have a scenario where I have two divs named left and right. The left div contains a list of bullets (li elements) and is floated to the left, while the right div has text and HTML content. At times, either the left or the right div may be taller than the ...

Is it possible to display a Processing message at the beginning of a datatables table already containing data?

Within my Laravel 5.7 application, I have implemented the "yajra/laravel-datatables-oracle": "~8.0" library and found a helpful thread on customizing the processing message at this link. I adjusted the processing message styling as follows: .dataTables_pr ...

Why is margin-top behaving unexpectedly?

Greetings! I have a website created using css, html, and php. Take a moment to review this code: <?php session_start(); include_once "mysql_connect.php"; $log = null; if(isset($_SESSION["ID"])){ $log = $_SESSION["ID"]; }e ...

Which shortcuts or techniques in jQuery/JavaScript can I implement to simplify this code further?

I've written a script to handle responsive design for smaller devices and display a toggle menu instead of a full-width menu. The current script works, but I find it messy. How can I make this code more minimalistic and efficient? Is it good practice ...

What is the reason my hyperlinks are not clickable?

I'm working on a project that checks if a Twitchtv user is live streaming and provides a link to their page. The streaming part is working correctly, but I'm having trouble making the username clickable. Even though the URL is valid and the page ...

Altering documents post Bower installation

I took the initiative to manually download the css and js files for an angular module (here). In order to make a small adjustment, I modified the css (specifically changing max-width in the media query): Original: @media only screen and (max-width: 800px ...

Guide to applying conditional styling to Material-UI TextField

After creating a custom MUI TextField, I implemented the following styling: const CustomDisableInput = styled(TextField)(() => ({ ".MuiInputBase-input.Mui-disabled": { WebkitTextFillColor: "#000", color: "#00 ...

Is it possible for Susy to output a pixel-based span?

As a newbie to Susy, I hope you don't mind if I ask a seemingly silly question... I'm trying to figure out how to calculate responsive padding within a Susy grid. The standard formula is: (target / context) x 100. Is there a way for Susy to pr ...

Dynamic content container with customizable sidebar

I have a query that remains unanswered in my research on various CSS layout options. Hence, I decided to share it here. My ongoing project involves a fluid/fixed two-column design. The main content is placed on the left side while the sidebar resides on t ...

The HTML element failed to be inserted

Currently, I am involved in a project based on .NET Core for my organization. This project entails loading work orders from our SQL database using Entity Framework and then filtering them to display as markers on a map via the Google Maps API for our insta ...

Moving from one page to another

I am attempting to create a transition effect between sections within a single-page application. All the sections are contained on the same page, with only one section displayed at a time while the rest are set to display none. When a specific event is tri ...