0.23.2 // Markdown: Table column width should be determined by longest cell in column, even with 'width: 100%' custom head content #788

New Issue

OVERLORD · 2026-02-04T22:17:37+03:00

OVERLORD commented

2026-02-04 22:17:37 +03:00

Originally created by @derek-shnosh on GitHub (Aug 21, 2018).

Describe the bug
When configuring the table width to 100% in the Custom HTML head content, the table column width is not determined by the longest cell in the column; i.e. all columns are evently distributed across the width of the page.

<style>
table {
  width: 100%;
}
</style>

Steps To Reproduce
Steps to reproduce the behavior:

Add the CSS style code (above) to Custom HTML head content in app settings.
Create a table.

Expected behavior
Table column width should be determined by the longest cell in the column.

Sample Code

| Ninite? | App                                                                                           | Version  | Info                               | Notes                                                              |
| :-----: | :-------------------------------------------------------------------------------------------- | :------: | :--------------------------------- | :----------------------------------------------------------------- |
| *       | [Firefox](https://firefox.com)                                                                | 61.0.2   | Browser                            |                                                                    |
| *       | [Chrome](https://google.com/chrome)                                                           | 68.0.3   | Browser                            |                                                                    |
| *       | [7-Zip](https://7-zip.org/)                                                                   | 18.5     | Compression Utility                |                                                                    |
| *       | [Notepad++](https://notepad-plus-plus.org/)                                                   | 7.5.8.0  | Text/code editor                   |                                                                    |
| *       | [WinSCP](https://winscp.net)                                                                  | 5.13.3.0 | FTP/SFTP client                    |                                                                    |
| *       | [ShareX](https://getsharex.com)                                                               | 12.2.0   | Screencapture, productivity tool   | Screenshot: `\pictures\screenshots\`                               |
| *       | [Java 8 RE](https://oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html) | 8u181    | Java runtime environment           |                                                                    |
| *       | [.Net RE](https://microsoft.com/net/download/dotnet-framework-runtime)                        | 4.7.2    | .Net framework runtime             |                                                                    |
|         | [SecureCRT](https://vandyke.com/products/securecrt/index.html)                                | 8.3.4    | Terminal Emulator; ssh/telnet/etc. | Session logs: `\documents\scrtlogs`<br>TFTP dir: `\documents\tftp` |
|         | [T-Clock](https://github.com/White-Tiger/T-Clock/)                                            | 2.4.4    | Configurable Windows taskbar clock |                                                                    |

Expected Result

*Installed via Ninite, updater in c:\tools\misc\ninite.exe

Ninite?	App	Version	Info	Notes
*	Firefox	61.0.2	Browser
*	Chrome	68.0.3	Browser
*	7-Zip	18.5	Compression Utility
*	Notepad++	7.5.8.0	Text/code editor
*	WinSCP	5.13.3.0	FTP/SFTP client
*	ShareX	12.2.0	Screencapture, productivity tool	Screenshot: `\pictures\screenshots\`
*	Java 8 RE	8u181	Java runtime environment
*	.Net RE	4.7.2	.Net framework runtime
	SecureCRT	8.3.4	Terminal Emulator; ssh/telnet/etc.	Session logs: `\documents\scrtlogs` TFTP dir: `\documents\tftp`
	T-Clock	2.4.4	Configurable Windows taskbar clock

Screenshot from BookStack

Your Configuration (please complete the following information):

Exact BookStack Version (Found in settings): 0.23.2
PHP Version: 7.2.7-0ubuntu0.18.04.2
Hosting Method (Nginx/Apache/Docker): Apache (install script)

Additional context

This is the only MD editor/platform I've used, admittedly with relatively limited experience, that doesn't adhere to this rule.
I'd be content with a functional css style for the custom header in app settings if someone knows a way to do this.

Originally created by @derek-shnosh on GitHub (Aug 21, 2018). **Describe the bug** When configuring the table width to 100% in the _Custom HTML head content_, the table column width is not determined by the longest cell in the column; i.e. all columns are evently distributed across the width of the page. ```php <style> table { width: 100%; } </style> ``` **Steps To Reproduce** Steps to reproduce the behavior: 1. Add the CSS style code (above) to _Custom HTML head content_ in app settings. 2. Create a table. **Expected behavior** Table column width should be determined by the longest cell in the column. **Sample Code** ``` | Ninite? | App | Version | Info | Notes | | :-----: | :-------------------------------------------------------------------------------------------- | :------: | :--------------------------------- | :----------------------------------------------------------------- | | * | [Firefox](https://firefox.com) | 61.0.2 | Browser | | | * | [Chrome](https://google.com/chrome) | 68.0.3 | Browser | | | * | [7-Zip](https://7-zip.org/) | 18.5 | Compression Utility | | | * | [Notepad++](https://notepad-plus-plus.org/) | 7.5.8.0 | Text/code editor | | | * | [WinSCP](https://winscp.net) | 5.13.3.0 | FTP/SFTP client | | | * | [ShareX](https://getsharex.com) | 12.2.0 | Screencapture, productivity tool | Screenshot: `\pictures\screenshots\` | | * | [Java 8 RE](https://oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html) | 8u181 | Java runtime environment | | | * | [.Net RE](https://microsoft.com/net/download/dotnet-framework-runtime) | 4.7.2 | .Net framework runtime | | | | [SecureCRT](https://vandyke.com/products/securecrt/index.html) | 8.3.4 | Terminal Emulator; ssh/telnet/etc. | Session logs: `\documents\scrtlogs`<br>TFTP dir: `\documents\tftp` | | | [T-Clock](https://github.com/White-Tiger/T-Clock/) | 2.4.4 | Configurable Windows taskbar clock | | ``` **Expected Result** **Installed via [Ninite](https://ninite.com), updater in `c:\tools\misc\ninite.exe`* | Ninite? | App | Version | Info | Notes | | :-----: | :-------------------------------------------------------------------------------------------- | :------: | :--------------------------------- | :----------------------------------------------------------------- | | * | [Firefox](https://firefox.com) | 61.0.2 | Browser | | | * | [Chrome](https://google.com/chrome) | 68.0.3 | Browser | | | * | [7-Zip](https://7-zip.org/) | 18.5 | Compression Utility | | | * | [Notepad++](https://notepad-plus-plus.org/) | 7.5.8.0 | Text/code editor | | | * | [WinSCP](https://winscp.net) | 5.13.3.0 | FTP/SFTP client | | | * | [ShareX](https://getsharex.com) | 12.2.0 | Screencapture, productivity tool | Screenshot: `\pictures\screenshots\` | | * | [Java 8 RE](https://oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html) | 8u181 | Java runtime environment | | | * | [.Net RE](https://microsoft.com/net/download/dotnet-framework-runtime) | 4.7.2 | .Net framework runtime | | | | [SecureCRT](https://vandyke.com/products/securecrt/index.html) | 8.3.4 | Terminal Emulator; ssh/telnet/etc. | Session logs: `\documents\scrtlogs`<br>TFTP dir: `\documents\tftp` | | | [T-Clock](https://github.com/White-Tiger/T-Clock/) | 2.4.4 | Configurable Windows taskbar clock | | **Screenshot from BookStack** ![image](https://user-images.githubusercontent.com/21090563/44414457-b4777980-a522-11e8-9316-3f318670c246.png) **Your Configuration (please complete the following information):** - Exact BookStack Version (Found in settings): 0.23.2 - PHP Version: 7.2.7-0ubuntu0.18.04.2 - Hosting Method (Nginx/Apache/Docker): Apache (install script) **Additional context** - This is the only MD editor/platform I've used, admittedly with relatively limited experience, that doesn't adhere to this _rule_. - I'd be content with a functional css style for the custom header in app settings if someone knows a way to do this.

OVERLORD closed this issue

2026-02-04 22:17:40 +03:00

OVERLORD commented

2026-02-04 22:17:44 +03:00

@derek-shnosh commented on GitHub (Aug 21, 2018):

I found my solution using table-layout in Custom HTML head content in app settings.

<style>
.page-content table {
  width: 100%;
  table-layout: auto; }
</style>

@derek-shnosh commented on GitHub (Aug 21, 2018): I found my solution using `table-layout` in _Custom HTML head content_ in app settings. ```php <style> .page-content table { width: 100%; table-layout: auto; } </style> ```

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#788