Html table bug with background image while resizing browser

table {

  border-collapse: collapse;

}



table td {

  background-image: url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');

}



#main {

  width: 200px;

  margin: auto;

  border: 1px solid red;

}

<div id="main">

  <table>

     <tr>

       <td>d</td>

       <td>a</td>

       <td>m</td>

       <td>n</td>

       <td>b</td>

       <td>u</td>

       <td>g</td>

    </tr>

  </table>

</div>

I have simple table with the background image for TD in a centered div. When I will resize the browser window width with a mouse (Chrome, Opera) then a white spaces appears between TD.

How can I solve it?

Example: http://jsfiddle.net/gauh9s7t/

Video: https://www.youtube.com/watch?v=V4h5bEOS3jE

edited Nov 15 '18 at 19:31

Brian Tompsett - 汤莱恩

4,2421338102

asked Nov 15 '18 at 16:21

Rotacak

If you are using an image with solid color, why not using background-color?

– marcelo2605
Nov 15 '18 at 16:34

Do you have to use a table?

– Peter
Nov 15 '18 at 16:39

Look into sub-pixel rounding.

– isherwood
Nov 15 '18 at 16:50

@marcelo2605 that is just a example. I need to use my own background image.

– Rotacak
Nov 15 '18 at 17:46

@Peter yes, look there for the table: rotaxmame.cz/assault

– Rotacak
Nov 15 '18 at 17:47

add a comment |

table {

  border-collapse: collapse;

}



table td {

  background-image: url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');

}



#main {

  width: 200px;

  margin: auto;

  border: 1px solid red;

}

<div id="main">

  <table>

     <tr>

       <td>d</td>

       <td>a</td>

       <td>m</td>

       <td>n</td>

       <td>b</td>

       <td>u</td>

       <td>g</td>

    </tr>

  </table>

</div>

I have simple table with the background image for TD in a centered div. When I will resize the browser window width with a mouse (Chrome, Opera) then a white spaces appears between TD.

How can I solve it?

Example: http://jsfiddle.net/gauh9s7t/

Video: https://www.youtube.com/watch?v=V4h5bEOS3jE

edited Nov 15 '18 at 19:31

Brian Tompsett - 汤莱恩

4,2421338102

asked Nov 15 '18 at 16:21

Rotacak

If you are using an image with solid color, why not using background-color?

– marcelo2605
Nov 15 '18 at 16:34

Do you have to use a table?

– Peter
Nov 15 '18 at 16:39

Look into sub-pixel rounding.

– isherwood
Nov 15 '18 at 16:50

@marcelo2605 that is just a example. I need to use my own background image.

– Rotacak
Nov 15 '18 at 17:46

@Peter yes, look there for the table: rotaxmame.cz/assault

– Rotacak
Nov 15 '18 at 17:47

add a comment |

table {

  border-collapse: collapse;

}



table td {

  background-image: url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');

}



#main {

  width: 200px;

  margin: auto;

  border: 1px solid red;

}

<div id="main">

  <table>

     <tr>

       <td>d</td>

       <td>a</td>

       <td>m</td>

       <td>n</td>

       <td>b</td>

       <td>u</td>

       <td>g</td>

    </tr>

  </table>

</div>

I have simple table with the background image for TD in a centered div. When I will resize the browser window width with a mouse (Chrome, Opera) then a white spaces appears between TD.

How can I solve it?

Example: http://jsfiddle.net/gauh9s7t/

Video: https://www.youtube.com/watch?v=V4h5bEOS3jE

edited Nov 15 '18 at 19:31

Brian Tompsett - 汤莱恩

4,2421338102

asked Nov 15 '18 at 16:21

Rotacak

table {

  border-collapse: collapse;

}



table td {

  background-image: url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');

}



#main {

  width: 200px;

  margin: auto;

  border: 1px solid red;

}

<div id="main">

  <table>

     <tr>

       <td>d</td>

       <td>a</td>

       <td>m</td>

       <td>n</td>

       <td>b</td>

       <td>u</td>

       <td>g</td>

    </tr>

  </table>

</div>

I have simple table with the background image for TD in a centered div. When I will resize the browser window width with a mouse (Chrome, Opera) then a white spaces appears between TD.

How can I solve it?

Example: http://jsfiddle.net/gauh9s7t/

Video: https://www.youtube.com/watch?v=V4h5bEOS3jE

table {

  border-collapse: collapse;

}



table td {

  background-image: url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');

}



#main {

  width: 200px;

  margin: auto;

  border: 1px solid red;

}

<div id="main">

  <table>

     <tr>

       <td>d</td>

       <td>a</td>

       <td>m</td>

       <td>n</td>

       <td>b</td>

       <td>u</td>

       <td>g</td>

    </tr>

  </table>

</div>

table {

  border-collapse: collapse;

}



table td {

  background-image: url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');

}



#main {

  width: 200px;

  margin: auto;

  border: 1px solid red;

}

<div id="main">

  <table>

     <tr>

       <td>d</td>

       <td>a</td>

       <td>m</td>

       <td>n</td>

       <td>b</td>

       <td>u</td>

       <td>g</td>

    </tr>

  </table>

</div>

html css html-table

edited Nov 15 '18 at 19:31

Brian Tompsett - 汤莱恩

4,2421338102

asked Nov 15 '18 at 16:21

Rotacak

edited Nov 15 '18 at 19:31

Brian Tompsett - 汤莱恩

4,2421338102

asked Nov 15 '18 at 16:21

Rotacak

edited Nov 15 '18 at 19:31

Brian Tompsett - 汤莱恩

4,2421338102

edited Nov 15 '18 at 19:31

Brian Tompsett - 汤莱恩

4,2421338102

edited Nov 15 '18 at 19:31

Brian Tompsett - 汤莱恩

4,2421338102

asked Nov 15 '18 at 16:21

Rotacak

asked Nov 15 '18 at 16:21

Rotacak

asked Nov 15 '18 at 16:21

Rotacak

If you are using an image with solid color, why not using background-color?

– marcelo2605
Nov 15 '18 at 16:34

Do you have to use a table?

– Peter
Nov 15 '18 at 16:39

Look into sub-pixel rounding.

– isherwood
Nov 15 '18 at 16:50

@marcelo2605 that is just a example. I need to use my own background image.

– Rotacak
Nov 15 '18 at 17:46

@Peter yes, look there for the table: rotaxmame.cz/assault

– Rotacak
Nov 15 '18 at 17:47

add a comment |

If you are using an image with solid color, why not using background-color?

– marcelo2605
Nov 15 '18 at 16:34

Do you have to use a table?

– Peter
Nov 15 '18 at 16:39

Look into sub-pixel rounding.

– isherwood
Nov 15 '18 at 16:50

@marcelo2605 that is just a example. I need to use my own background image.

– Rotacak
Nov 15 '18 at 17:46

@Peter yes, look there for the table: rotaxmame.cz/assault

– Rotacak
Nov 15 '18 at 17:47

If you are using an image with solid color, why not using background-color?

– marcelo2605
Nov 15 '18 at 16:34

Do you have to use a table?

– Peter
Nov 15 '18 at 16:39

Look into sub-pixel rounding.

– isherwood
Nov 15 '18 at 16:50

@marcelo2605 that is just a example. I need to use my own background image.

– Rotacak
Nov 15 '18 at 17:46

@Peter yes, look there for the table: rotaxmame.cz/assault

– Rotacak
Nov 15 '18 at 17:47

add a comment |

2 Answers
2

active

oldest

votes

Is not a bug, it is about your background-image:

url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');

If you replace this property with background color every td from your table will be fine.

edited Nov 15 '18 at 16:48

isherwood

37.4k1082112

answered Nov 15 '18 at 16:39

Liviu Nita

What have the white spaces to do with background image? Yes, background color works ok, but I need to use background image with repeated property.

– Rotacak
Nov 15 '18 at 17:44

add a comment |

You can fix it by adding the background-repeat property :

table td {

  background-image: url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');

  background-repeat: no-repeat;

}

http://jsfiddle.net/gauh9s7t/10/

answered Nov 15 '18 at 16:55

th31

131211

That could be a workaround, but I would like to use the repeated background.

– Rotacak
Nov 15 '18 at 17:43

You could also use this property background-attachment: fixed; instead of using the background-repeat jsfiddle.net/gauh9s7t/11

– th31
Nov 15 '18 at 18:57

background-attachment: fixed; seems good. Together with adding background-position-y for correct position. But still this seems like browser bug, I should report it somewhere. There is also another bug when I will set repeated background for TR then it will leak on the right side for about 1 px. But I can get around this by not setting background for TR but only for TD.

– Rotacak
Nov 15 '18 at 19:19

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53323752%2fhtml-table-bug-with-background-image-while-resizing-browser%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Is not a bug, it is about your background-image:

url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');

If you replace this property with background color every td from your table will be fine.

edited Nov 15 '18 at 16:48

isherwood

37.4k1082112

answered Nov 15 '18 at 16:39

Liviu Nita

What have the white spaces to do with background image? Yes, background color works ok, but I need to use background image with repeated property.

– Rotacak
Nov 15 '18 at 17:44

add a comment |

Is not a bug, it is about your background-image:

url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');

If you replace this property with background color every td from your table will be fine.

edited Nov 15 '18 at 16:48

isherwood

37.4k1082112

answered Nov 15 '18 at 16:39

Liviu Nita

What have the white spaces to do with background image? Yes, background color works ok, but I need to use background image with repeated property.

– Rotacak
Nov 15 '18 at 17:44

add a comment |

Is not a bug, it is about your background-image:

url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');

If you replace this property with background color every td from your table will be fine.

edited Nov 15 '18 at 16:48

isherwood

37.4k1082112

answered Nov 15 '18 at 16:39

Liviu Nita

Is not a bug, it is about your background-image:

url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');

If you replace this property with background color every td from your table will be fine.

edited Nov 15 '18 at 16:48

isherwood

37.4k1082112

answered Nov 15 '18 at 16:39

Liviu Nita

edited Nov 15 '18 at 16:48

isherwood

37.4k1082112

edited Nov 15 '18 at 16:48

isherwood

37.4k1082112

edited Nov 15 '18 at 16:48

isherwood

37.4k1082112

answered Nov 15 '18 at 16:39

Liviu Nita

answered Nov 15 '18 at 16:39

Liviu Nita

answered Nov 15 '18 at 16:39

Liviu Nita

What have the white spaces to do with background image? Yes, background color works ok, but I need to use background image with repeated property.

– Rotacak
Nov 15 '18 at 17:44

add a comment |

What have the white spaces to do with background image? Yes, background color works ok, but I need to use background image with repeated property.

– Rotacak
Nov 15 '18 at 17:44

What have the white spaces to do with background image? Yes, background color works ok, but I need to use background image with repeated property.

– Rotacak
Nov 15 '18 at 17:44

add a comment |

You can fix it by adding the background-repeat property :

table td {

  background-image: url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');

  background-repeat: no-repeat;

}

http://jsfiddle.net/gauh9s7t/10/

answered Nov 15 '18 at 16:55

th31

131211

That could be a workaround, but I would like to use the repeated background.

– Rotacak
Nov 15 '18 at 17:43

You could also use this property background-attachment: fixed; instead of using the background-repeat jsfiddle.net/gauh9s7t/11

– th31
Nov 15 '18 at 18:57

background-attachment: fixed; seems good. Together with adding background-position-y for correct position. But still this seems like browser bug, I should report it somewhere. There is also another bug when I will set repeated background for TR then it will leak on the right side for about 1 px. But I can get around this by not setting background for TR but only for TD.

– Rotacak
Nov 15 '18 at 19:19

add a comment |

You can fix it by adding the background-repeat property :

table td {

  background-image: url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');

  background-repeat: no-repeat;

}

http://jsfiddle.net/gauh9s7t/10/

answered Nov 15 '18 at 16:55

th31

131211

That could be a workaround, but I would like to use the repeated background.

– Rotacak
Nov 15 '18 at 17:43

You could also use this property background-attachment: fixed; instead of using the background-repeat jsfiddle.net/gauh9s7t/11

– th31
Nov 15 '18 at 18:57

background-attachment: fixed; seems good. Together with adding background-position-y for correct position. But still this seems like browser bug, I should report it somewhere. There is also another bug when I will set repeated background for TR then it will leak on the right side for about 1 px. But I can get around this by not setting background for TR but only for TD.

– Rotacak
Nov 15 '18 at 19:19

add a comment |

You can fix it by adding the background-repeat property :

table td {

  background-image: url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');

  background-repeat: no-repeat;

}

http://jsfiddle.net/gauh9s7t/10/

answered Nov 15 '18 at 16:55

th31

131211

You can fix it by adding the background-repeat property :

table td {

  background-image: url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');

  background-repeat: no-repeat;

}

http://jsfiddle.net/gauh9s7t/10/

answered Nov 15 '18 at 16:55

th31

131211

answered Nov 15 '18 at 16:55

th31

131211

answered Nov 15 '18 at 16:55

th31

131211

answered Nov 15 '18 at 16:55

th31

131211

That could be a workaround, but I would like to use the repeated background.

– Rotacak
Nov 15 '18 at 17:43

You could also use this property background-attachment: fixed; instead of using the background-repeat jsfiddle.net/gauh9s7t/11

– th31
Nov 15 '18 at 18:57

background-attachment: fixed; seems good. Together with adding background-position-y for correct position. But still this seems like browser bug, I should report it somewhere. There is also another bug when I will set repeated background for TR then it will leak on the right side for about 1 px. But I can get around this by not setting background for TR but only for TD.

– Rotacak
Nov 15 '18 at 19:19

add a comment |

That could be a workaround, but I would like to use the repeated background.

– Rotacak
Nov 15 '18 at 17:43

You could also use this property background-attachment: fixed; instead of using the background-repeat jsfiddle.net/gauh9s7t/11

– th31
Nov 15 '18 at 18:57

background-attachment: fixed; seems good. Together with adding background-position-y for correct position. But still this seems like browser bug, I should report it somewhere. There is also another bug when I will set repeated background for TR then it will leak on the right side for about 1 px. But I can get around this by not setting background for TR but only for TD.

– Rotacak
Nov 15 '18 at 19:19

That could be a workaround, but I would like to use the repeated background.

– Rotacak
Nov 15 '18 at 17:43

You could also use this property background-attachment: fixed; instead of using the background-repeat jsfiddle.net/gauh9s7t/11

– th31
Nov 15 '18 at 18:57

background-attachment: fixed; seems good. Together with adding background-position-y for correct position. But still this seems like browser bug, I should report it somewhere. There is also another bug when I will set repeated background for TR then it will leak on the right side for about 1 px. But I can get around this by not setting background for TR but only for TD.

– Rotacak
Nov 15 '18 at 19:19

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky