Is there a way to minimize the space between the text "Name:" and "Bob", as well as between "Age:" and "20" using CSS?
fiddle: http://jsfiddle.net/QfN3f/2/
html:
<table class="table">
<tr class="table-row">
<td class="table-col">Name:</td>
<td class="table-col">Bob</td>
<td class="table-col">Age:</td>
<td class="table-col">20</td>
</tr>
</table>
css:
.table {
width:100%
}
To enhance the styling of your "labels," I recommend adding a new class.
<table class="table">
<tr class="table-row">
<td class="table-col label">Name:</td>
<td class="table-col">Bob</td>
<td class="table-col label">Age:</td>
<td class="table-col">20</td>
</tr>
</table>
For the CSS:
.table {
width:100%
}
.label {width:50px; font-weight:bold;}
You may also utilize n-th child for this purpose.
tr td:nth-child(odd) {width:50px; font-weight:bold;}
If the data is not truly tabular, consider using a definition list instead of a table.
If you absolutely need to utilize a table for this purpose, I recommend the following approach (assuming that your label td elements are always the odd-numbered elements):
td:nth-child(odd) {
text-align: right;
}
td:nth-child(even) {
text-align: left;
}
Check out the JS Fiddle demo here.
However, I highly recommend transitioning to more semantic HTML, like using a definition list:
<dl>
<dt>Name</dt>
<dd>Bob</dd>
<dt>Age</dt>
<dd>20</dd>
</dl>
With the corresponding CSS:
dt, dd {
display: inline-block; /* enables side-by-side placement */
width: 5em;
margin: 0; /* eliminates default margins */
padding: 0.2em 0; /* enhances aesthetics and overrides defaults */
}
dt {
text-align: right; /* aligns the 'label' towards the right */
}
dd {
text-align: left;
text-indent: 0.5em; /* adds slight separation for visual appeal; adjust as needed */
}
The reason for the significant gaps between table cells is due to their ability to expand to fill available space. To decrease the amount of whitespace, refrain from stretching the table all the way across the parent div by eliminating the width:100% property from the table.
To prevent the columns from becoming overly close together, consider adding a min-width to the cells at the same time.
Adjust the width of the column by adding a percentage or fixed value:
<td class="table-col" width="20px">Name:</td>
or
HTML
<td class="table-col name-col">Name:</td>
CSS
.name-col{
width:20px;
}
If no specific width is specified for each column, they will all have the same width.
To reduce the space between columns, you can also adjust the table width by removing width:100% and setting a fixed or smaller width, or assigning a fixed width to all columns.
To enhance the appearance of your table, consider removing the width:100% attribute and adding padding to the table cells (td).
.table td {
padding: 10px
}
Check out this jsfiddle for a live example.
If you wish to customize specific cells, simply add a unique class like <td class="myCustomClass"> and adjust properties such as width or padding in the CSS.
Try out the following HTML code:
<table class="table">
<tr class="table-row">
<td class="table-col-a">Name:</td>
<td class="table-col-b">Bob</td>
<td class="table-col-a">Age:</td>
<td class="table-col-b">20</td>
</tr>
</table>
Additionally, utilize this CSS code:
.table-col-a{float:right;}
Feel free to adjust the paddings to achieve your desired appearance.
To implement this in your code, simply make the following changes:
<table class="custom-table">
<tr class="row">
<td class="cell-a">Name:</td>
<td class="cell-b">John</td>
<td class="cell-a">Age:</td>
<td class="cell-b">25</td>
</tr>
</table>
And update your CSS with the following styles:
.custom-table
{
width:100%;
}
.custom-table td
{
width: 25%;
}
.cell-a
{
text-align: right;
}
.cell-b
{
text-align: left;
}
By making these adjustments, you should see the desired outcome:
Check out this demonstration of a Sencha Touch app by visiting this link. The button located in the bottom-left corner is supposed to show or hide the menu panel on top of the "Location info goes here" bar, but it seems to be functioning in an unexpected m ...
As I delve into using responsive images, a question has arisen. On my website, there is an icon that comes in two sizes: a small version measuring 74 pixels wide and a larger version at 94 pixels wide. <img alt="Section Gino" style="background-color: ...
Whenever I print from Chrome, there seems to be extra space between lines in the middle of a paragraph! Here is an image showing the difference between print emulation and print preview This excess space is always in the same position on various pages an ...
I recently started learning Ruby on Rails and encountered an issue with resizing images using CSS. After replacing an image field with the Ruby image_tag, I noticed extra blank space below the image. Upon inspecting the element, I found two tags for the s ...
How to Populate a Combo Box from a Database in PHP? <td>Item Name:</td> <td><select name="items"> <option value="0" selected="selected"> Choose</option> <?php while($row = mysql_fetch_ass ...
Currently, I am attempting to extract a specific string from a tag in javascript using the following code: document.querySelector('.title h2').textContent However, when I execute this code, I am getting a result that includes unnecessary double ...
I need to divide a div container into two vertical sections, one occupying 60% of the space and the other 40%. The top div (60%) should always be visible, while the bottom div (40%) should be scrollable if it exceeds its limit. I have tried different app ...
I am trying to develop a high chart graph. Check out my code on FIDDLE LINK. I have two values, a and b, for the x-axis and y-axis. The issue arises when the difference between a and b is minimal, such as when both are equal (-9). In such cases, the grap ...
I have come across similar questions, but none of them quite addressed my specific situation. My dilemma involves a tabbed navigation that can vary in size depending on the number of tabs added to it. Adjacent to the navigation, there is a second area hous ...
Here is the HTML code for a mosaic of images. <div id="container"> <img id="1" /> ... <img id="20" /> </div> This script creates a mosaic layout from the images on the page after it has loaded or been resized. <script& ...
I need assistance in reducing the height of a div within an ajax response that has a class called .shorten-post, but I am unsure how to accomplish this task. I specifically want to decrease the height only for those within the ajax response, not throughou ...
I have been working on an Ajax search suggest input and have successfully implemented it. However, I would like to tweak the script so that when a suggestion is selected, the form auto-submits. Below is my JavaScript code: <script> function suggest ...
Hello, I seem to be having a CSS issue. Interestingly, my menu (burger menu) works perfectly fine on Firefox but is not functioning properly on Chrome and mobile devices. When I click the button, the menu doesn't open. Has anyone encountered a simil ...
I am currently working with a dialog component provided by angular-material and I need to customize the appearance of the popup dialog. I am aware that there is some support for styling through the component generation: let dialogRef = dialog.open(MyDi ...
Does anyone know which library is being used on the website linked here? I am working on a project similar to this and would appreciate if anyone can identify this library for me. Thank you in advance. ...
I'm in need of assistance. I have a grid containing several images that I want to make clickable by adding anchor tags, but when I do this, the images seem to disappear completely. I suspect there's an issue with them being inside the container d ...
I have been experimenting with programming an ESP32 to regulate the LED brightness using a slider. I've pieced together some information from tutorials found on and Currently, I've achieved the ESP32 connecting to my network, displaying the sli ...
I am currently experiencing an issue with my tooltip while using Bootstrap 4. In my index.html, I have the following script loaded: $('body').tooltip({ selector: '[data-toggle="tooltip"]', delay: { show: 550, hide: 0 } }); The proble ...
This particular dialog mimics the design of a Windows Vista Command Link: View image here: http://i.msdn.microsoft.com/Aa511455.commandlinks01(en-us,MSDN.10).png I'm curious if anyone has created HTML code that replicates the appearance and function ...
I'm having an issue with my code that submits a form when an option in a select box is clicked. The problem arises when I try to put it inside a loop, as it stops working. Can anyone assist me with this? Below is the code snippet causing trouble: &l ...