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.8k times

25

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,304

9

38

66

asked Jul 12 '11 at 02:09
Zaheer

2,794

5

28

33

2 Answers2

27

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,336

2

12

22

answered Jul 12 '11 at 02:16
ElonU Webdev

2,451

14

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

19

try adding the following css to your table:

`border-collapse: collapse;`

answered Jul 12 '11 at 02:22
Ben Rowe

28,406

6

55

75

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

4
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 27 · Answer 1 · edited Jan 20 '15 at 16:10

27

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,336
2
12
22

answered Jul 12 '11 at 02:16

ElonU Webdev

2,451
14
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 19 · Accepted Answer · answered Jul 12 '11 at 02:22

19

try adding the following css to your table:

border-collapse: collapse;

answered Jul 12 '11 at 02:22

Ben Rowe

28,406
6
55
75

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