How to Remove Unwanted Space in This Table

How to remove unwanted space between rows and columns in table?

Add this CSS reset to your CSS code: (From here)

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

It'll reset the CSS effectively, getting rid of the padding and margins.

How to remove unwanted space in this table?

Add cellpadding="0" to your table element. Try this.

<table cellspacing="0" cellpadding="0" style="font-size:30px;">

Remove spacing between table cells and rows

It looks like the DOCTYPE is causing the image to display as an inline element. If I add display: block to the image, problem solved.

Remove unwanted spacing ( ) between 2 table elements

It seems like the issue is the  s you intentionally added within the table. HTML has strict rules about what can and can't be a direct child of the various table elements.

A text node can't be the direct child of a tr, which can contain only:

Zero or more td, th, and script-supporting elements.

Therefore, the   text nodes get pushed outside the table. Remove those, and the visual layout will be fixed (I'd still recommend fixing the semantics of the markup, though).


Original answer below

Your HTML is malformed in any case. What looks to be a table header row and body row are represented as 2 separate tables. Try something like this:

<table style="border-collapse: collapse;">
<thead style="/* styles from what's currently your first table */">
<tr>
<!-- content from what's currently your first table -->
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody style="/* styles from what's currently your second table */">
<tr>
<!-- content from what's currently your second table -->
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>

html remove space from table row

you can try and add this to your CSS:

td {
line-height: 0;
}​

should solve it.

Remove all spaces from a string in SQL Server

Simply replace it;

SELECT REPLACE(fld_or_variable, ' ', '')

Edit:
Just to clarify; its a global replace, there is no need to trim() or worry about multiple spaces for either char or varchar:

create table #t (
c char(8),
v varchar(8))

insert #t (c, v) values
('a a' , 'a a' ),
('a a ' , 'a a ' ),
(' a a' , ' a a' ),
(' a a ', ' a a ')

select
'"' + c + '"' [IN], '"' + replace(c, ' ', '') + '"' [OUT]
from #t
union all select
'"' + v + '"', '"' + replace(v, ' ', '') + '"'
from #t

Result

IN             OUT
===================
"a a " "aa"
"a a " "aa"
" a a " "aa"
" a a " "aa"
"a a" "aa"
"a a " "aa"
" a a" "aa"
" a a " "aa"

removing space from cell in an html table

You're most likely seeing line-height of the <td>. Use the following CSS to remove it, along with any whitespace:

/* Gets rid of table cell whitespace */
table td {
line-height: 0;
font-size: 0;
}

/* Sets the font and line height correctly for the paragraph of text */
table td p {
line-height: 14px;
font-size: 14px;
}

You can see it in action here.

Remove space between button cells in table

There is a problem with the button's borders. First, you should set the buttons to display: block.

One simple solution is to explicitly set the button's height to the cell's height (20px). See this snippet:

var table = document.createElement('table');    table.className="table"; for (var i = 1; i < 5; i++){     var tr = document.createElement('tr');  for (var j = 1; j < 5; j++){      var td = document.createElement('td');      var but = document.createElement("BUTTON");      but.className = "table_but";      td.appendChild(but);      tr.appendChild(td);   }     table.appendChild(tr); } document.getElementById("table").appendChild(table);
table {    border-collapse: collapse; border-spacing: 0;}tr{ padding: 0px;    margin: 0px;}td { height: 20px; width: 20px; padding: 0;    margin: 0;}.table_but{ height: 20px; width: 100%;    margin : 0;    padding : 0;    display: block;}
<div id="table"></div>

How to remove spaces between cells in a html table

The browsers are not telling you that your border-spacing style is overridden by the user agent style sheet. Instead, they may indicate that inheritance does not take place for it. This is simply caused by the fact that some style sheet sets the property on the element.

The reason why your rule is not applied to the inner table element is that it does not match any of your selectors. The selector

table.tableGroup > tr > td > table

does not match it, because a tr element is never a child of table even if might appear to be. By HTML syntax, there is an intervening tbody element, even if its start and end tag are missing. The following selector would match:

table.tableGroup > tbody > tr > td > table

Of course, a mere table selector would do the job as well, provided that you want all table elements to be styled by the rule.



Related Topics



Leave a reply



Submit