How do I completely fill a 100% with in HTML?

Asked Jul 12 '11 at 02:09

Active Jan 20 '15 at 16:10

Viewed 2.5k times

24

I have some HTML that inject with Javascript into a web page. The final HTML I inject looks like:

`<table style="border-width: 0px; margin 0px; width:100%; height: 100%; padding:0px;"> <tbody style="border-width: 0px; margin 0px; width:100%; height: 100%; padding:0px;">`

For some odd reason when I examine tbody in Firebug, its size seems to be 4px smaller than the table. How do I get the to fill up ?

html css browser

edited Jan 04 '12 at 15:01
Josh Darnell

11,096

9

36

63

asked Jul 12 '11 at 02:09
Zaheer

2,664

5

26

33

2 Answers2

25

Try adding:

`border-collapse: collapse;`

To your `table`. Or try setting:

`display: block;`

or

`display: table`

on the `tbody` element.

edited Jan 20 '15 at 16:10
MichaelJones

1,184

2

11

21

answered Jul 12 '11 at 02:16
ElonU Webdev

2,433

13

15

This would probably be better as a comment or actually provide an answer and then some extra comments? – James Khoury Jul 12 '11 at 02:24

3

display: table and width:100% on tbody worked for me – Daniel Jun 15 '15 at 18:59

18

try adding the following css to your table:

`border-collapse: collapse;`

answered Jul 12 '11 at 02:22
Ben Rowe

27,548

6

52

73

Thanks for the quick response! Yes this fixed it! I wonder why though even though i specified border-width to be 0 it didn't have same effect. – Zaheer Jul 12 '11 at 02:36

Linked

3
React - Material UI: How to remove scrollbar from table

Question

I have some HTML that inject with Javascript into a web page. The final HTML I inject looks like:

<table style="border-width: 0px; margin 0px; width:100%; height: 100%; padding:0px;">
    <tbody style="border-width: 0px; margin 0px; width:100%; height: 100%; padding:0px;">

For some odd reason when I examine tbody in Firebug, its size seems to be 4px smaller than the table. How do I get the to fill up ?

score 25 · Answer 1 · edited Jan 20 '15 at 16:10

25

Try adding:

border-collapse: collapse;

To your table. Or try setting:

display: block;

or

display: table

on the tbody element.

edited Jan 20 '15 at 16:10

MichaelJones

1,184
2
11
21

answered Jul 12 '11 at 02:16

ElonU Webdev

2,433
13
15

This would probably be better as a comment or actually provide an answer and then some extra comments? – James Khoury Jul 12 '11 at 02:24
3

display: table and width:100% on tbody worked for me – Daniel Jun 15 '15 at 18:59

score 18 · Accepted Answer · answered Jul 12 '11 at 02:22

18

try adding the following css to your table:

border-collapse: collapse;

answered Jul 12 '11 at 02:22

Ben Rowe

27,548
6
52
73

Thanks for the quick response! Yes this fixed it! I wonder why though even though i specified border-width to be 0 it didn't have same effect. – Zaheer Jul 12 '11 at 02:36