How do I make two <pre> tag become same size?
Question
Here are my code:
table += '<tr>';
table += '<td width="800px" style="vertical-align:top"><pre>' + rqParam + '</pre></td>';
table += '<td width="800px" style="vertical-align:top"><pre>' + resParam + '</pre></td>';
table += '</tr>';
I use the variable table to generate a table that I want as result .
It seems that pre size will depend on the value inside, but what I want is to make the smaller one sized to be the same as the larger one.
Could you guys suggest me which style do I need to use to make it same size dynamically?
1 answers
solution1
0 2020-06-15 17:48:26
Instead of using a table, it can be easily solved using Flex elements. The following code shows a working sample - I've added a border around the pre elements to make it clear that they're the same size.
<html> <head></head> <body> <div style="width: 100%; display: flex; flex-flow: row nowrap; justify-content: center; align-content: center; align-items: stretch;"> <div style="display: flex; flex-grow: 1;"> <pre style="border: 1px solid red; width: 100%;">test string</pre> </div> <div style="flex-grow: 1;"> <pre style="border: 1px solid red; width: 100%;">test string<br>test string<br>test string</pre> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.