Floating a table to wrap text around

  • Resolved Jim

    (@jwmc)


    4 years ago

    Sorry to bug you again so soon. I have some small tables that look bad and are hard to read at full width in a wide browser window. I’m trying to shrink them and wrap the text around them left or right. I’m hoping there is an easier way.

    It seems the three elements (title/name, description, and the table itself) are independent and not in a wrapper/container. The main difficulty that makes is getting everything to identical width so the text is lined up (I’m using em to specify widths, I understand px is bad for responsiveness?). Also I have to clear the table or it wraps against the header/title. Not sure why the description doesn’t need that.

    You can see what I’ve got so far at the indicated page, 2nd table about 2/3 down the page. Here is the css that I’m using so far. It’s not pretty:

    /* Shrink and float table title */
h2.tablepress-table-name-id-27 {
	float: left;
	width: 19em;
}

/* Shrink table columns */
Make all columns narrower
.tablepress-id-27 .column-1,
.tablepress-id-27 .column-2,
.tablepress-id-27 .column-3 { 
	width: 8em;
}

/* Float table, allow to shrink */
.tablepress.tablepress-id-27 {
	float: left;
	clear: left;
	width: auto;
	margin: 0 1em 0 0;
}

/* Shrink and float description */
table.tablepress + span.tablepress-table-description-id-27 {
	float: left;
	width: 30em;
/* 	for left float */
	margin: 0 1em 1em 0;
}

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    Indeed, when showing all three parts (name, table, description), aligning these for wrapping is a bit complicated. My suggestion would be to add an extra HTML <div> tag around the Shortcode then, so that you do get a container element for use in CSS. So, for example, you could embed the table like

    <div class="tablepress-table-container">
[table id=123 /]
</div>

    Then, you could apply float and width to that container, e.g.

    .tablepress-table-container {
  float: left;
  margin-right: 10px;
  width: 8em;
}

    Regards,
    Tobias

    Thread Starter Jim

    (@jwmc)

    Thank you so much. That worked great, and much less css! I didn’t think it would be so easy to put the table elements in a <div>.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Floating a table to wrap text around’ is closed to new replies.