Adding a margin to the right of a very large table (overflowing the document)

word table outside margins
how to make a table fit on one page in word
word table margins
how to autofit a table in word 2016
large table in word
how to fit a large excel table into word 2016
excel table too big for word
how to make a large table in word

I have a rather large table (a lot of data about products) that is larger than the available space on some screens, resulting in a horizontal scrolling of the page.

I want to add a bit of margin to the right of this table, so that it's not completely stuck against the right side of the window. (This is both for visual and practical reasons, since on smartphones the scrolling bars will appear over the content of the screen and therefore cause small readability issues.)

But the margin-right property seems to be ignored, even if the table is contained inside a div with padding in it.

Is there a way to achieve that?

Here's a small example of the problem:

body {
  margin: 10px;
  padding: 10px;
  border: 5px solid #600;
  background: #eee;
}

.page {
  margin: 10px;
  padding: 10px;
  border: 5px solid #900;
  background: #ccc;
}

table {
  border: 5px solid #c00;
  background-color: #999;
  margin: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Test overflowing content</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="main.css" />
</head>

<body>
  (body)

<div class="page">
  (.page)

  <table>
    <tbody>
      <tr>
        <td>_____________________________________</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>_____________________________________</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>_____________________________________</td>
      </tr>
    </tbody>
  </table>

</div>
</body>
</html>

You have assign margin and margin-right to table tag. margin: 10px; overwrite the margin-right. You can use margin: 10px 100px 10px 10px; for this. check updated snippet below

body {
  margin: 10px;
  padding: 10px;
  border: 5px solid #600;
  background: #eee;
}

.page {
  margin: 10px;
  padding: 10px;
  border: 5px solid #900;
  background: #ccc;
}

table {
  border: 5px solid #c00;
  background-color: #999;
  /*margin-right: 100px;*/
  margin: 10px 100px 10px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Test overflowing content</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="main.css" />
</head>

<body>
  (body)

<div class="page">
  (.page)

  <table>
    <tbody>
      <tr>
        <td>_____________________________________</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>_____________________________________</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>_____________________________________</td>
      </tr>
    </tbody>
  </table>

</div>
</body>
</html>

html, Adding a margin to the right of a very large table (overflowing the document) I have a rather large table (a lot of data about products) that is larger than the  Click Margins, click Custom Margins, and then in the Top, Bottom, Left, and Right boxes, enter new values for the margins. To change the default margins, click Margins after you select a new margin, and then click Custom Margins. In the Page Setup dialog box, click the Default button, and then click Yes.

if you'd add a wrapper around that table, with overflow auto it'll fix the issue.

body {
  margin: 10px;
  padding: 10px;
  border: 5px solid #600;
  background: #eee;
}

.page {
  margin: 10px;
  padding: 10px;
  border: 5px solid #900;
  background: #ccc;
}

.page>div {
  overflow-x: auto;
}

table {
  border: 5px solid #c00;
  background-color: #999;
  margin: 10px;
}
<div class="page">


  <div>
    <table>
      <tbody>
        <tr>
          <td>_____________________________________</td>
          <td>Lorem ipsum dolor sit amet</td>
          <td>_____________________________________</td>
          <td>Lorem ipsum dolor sit amet</td>
          <td>_____________________________________</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

Resizing Very Large Tables (Microsoft Word), Sometimes when Len copies and pastes a table from one document to another the table Word makes sure that the table fits within the margins of the page. Right-click within the table to display a Context menu. if the text becomes too small for easy readability, adding points after a paragraph is a good  Move the mouse pointer over the Right Indent icon on the Ruler, hold down the left mouse button, and drag (move) the mouse to the left to adjust the right paragraph margin. Word displays a dotted vertical line to show you where the new right paragraph margin will be.

Fixed

Try this code

I have added a media query as well, defining a fixed width for the table

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Test overflowing content</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="main.css" />
  <style type="text/css">

    body {
  margin: 10px;
  padding: 10px;
  border: 5px solid #600;
  background: #eee;

}

.page {
  margin: 10px;
  padding: 10px;
  border: 5px solid #900;
  background: #ccc;

}
.tableWrap{
    width: 100%;
  overflow: scroll;
}


table {
  border: 5px solid #c00;
  background-color: #999;
  margin-right: 100px;
  margin: 10px;

}
@media only screen and (max-width:960px){
    table{
        width: 800px;
    }
}

  </style>
</head>

<body>


<div class="page">

    <div class="tableWrap">
  <table width="100%" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td>_____________________________________</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>_____________________________________</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>_____________________________________</td>
      </tr>
    </tbody>
  </table>
  </div>

</div>
</body>
</html>

Putting Tables within Margins (Microsoft Word) - Word Tips, When you first insert a table in your document, it extends from margin to margin. Later Need to know a quick way to make sure a too-wide table fits within the margins of your page? Right-click anywhere within the table. If the table width still exceeds the margins, change the font size by following these steps: Select the table. Press [Ctrl]< to reduce the font size. Double-click a column border to autofit the columns to the new reduced size.

Try this out, added td in css:

body {
   margin: 10px;
   padding: 10px;
   border: 5px solid #600;
   background: #eee;
}

.page {
   margin: 10px;
   padding: 10px;
   border: 5px solid #900;
   background: #ccc;
}

table {
   border: 5px solid #c00;
   background-color: #999;
   /* margin: 10px;  No need for margin */
}
td{
   padding: 5px;
   word-break: break-word;
}

 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <title>Test overflowing content</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="stylesheet" href="main.css" />
</head>

<body>
    (body)

    <div class="page">
      (.page)

      <table>
         <tbody>
            <tr>
                <td>_____________________________________</td>
                <td>Lorem ipsum dolor sit amet</td>
                <td>_____________________________________</td>
                <td>Lorem ipsum dolor sit amet</td>
                <td>_____________________________________</td>
            </tr>
         </tbody>
      </table>
   </div>
</body>
</html>

Tables run off the document after changing margins, But when I add that in page setup, the tables in the document all run off the right margin (see photo). When you change the right indent, that is only for text, not tables. If your tables are to wide to fit within the new margins you set, you will need to adjust Google takes abuse of its services very seriously. 1. Open a Microsoft Word document. 2. Click the Layout tab. 3. Click Margins. 4. Click Custom Margins. 5. Set the margins. 6. Click the Apply to drop-down. 7. Select how to apply the margins. 8. Click OK.

Tables overflowing page limits · Issue #727 · Kozea/WeasyPrint , This is the table overflowing at right: weasyprint - table witdth after adding width auto before width unset solved overflow And while inspecting the effects on all the document, I discover accidentally something very worrying, not Weasyprint 0.42 seems to hang / freeze on processing large tables #691. Can anyone help me with a right margin problem in a Word doc? Can anyone please help me with an problem with an unexplained wide right margin in my Word doc? I am using Microsoft Word 2008 for Mac (creating a booklet in A4 Landscape format).

How can I center a too wide table? - TeX, If a table (or any other horizontal box) is wider than the text ( \textwidth ) an overfull hbox warning is given and the content is placed anyway, which makes it run into the right margin. \end{tabular} which is then added internally. to be used in actual documents \begin{document} \lipsum[1] \begin{center}  Start studying Chapter 3 Word. Learn vocabulary, terms, and more with flashcards, games, and other study tools. table between the left and right document margins

Tables in HTML documents, When long tables are printed, the head and foot information may be repeated on extra row cells are added to the right of the table for left-to-right tables and to the left to the table (between the current left and right margins, including floats). This margin calculator will be your best friend if you want to find out an item's revenue, assuming you know its cost and your desired profit margin percentage.That's not all though, you can calculate any of the main variables in the sales process - cost of goods sold (how much you paid for the stuff that you sell), profit margin, revenue (how much you sell it for) and profit - from any of the

Comments
  • Ah sorry, my mistake. I started my tests with margin-right 100px, and then added margin 10px and forgot to remove the 100px declaration. I've updated my question to remove it and avoid confusion. But this doesn't change the core of the question: there's no margin at the right of the table, be it 10px or 100px, as you can see in your own snippet.
  • add td{white-space: nowrap;} if dont you dont want to break td element while resizing.
  • Thanks, but this doesn't answer my question (adding a margin to the right of the table). There are always cases where the table might be too wide for the screen (e.g. with more columns, or images in cells).