Я использовал простой трюк для твоей задачи. проверьте и попробуйте это
function myf(){
var el = document.getElementById('mybody');
document.getElementById('myhead').scrollLeft=el.scrollLeft;
}
th, td{
width:80px;
text-align:left;
}
@media (max-width:991px) {
table.table-sticky tbody {
overflow-x: hidden;
}
table.table-sticky th,
table.table-sticky td {
min-width: 100px !important;
width: 100px;
}
}
@media (min-width:768px) {
table.table-sticky tr {
table-layout: fixed;
}
}
@media (max-width:767px) {
table.table-sticky th,
table.table-sticky td {
min-width: 150px !important;
}
table.table-sticky tbody {
overflow-x: hidden;
}
}
table.table-sticky tr {
width: 100%;
display: inline-table;
float: left;
}
table.table-sticky th {
padding-left: 0;
}
table.table-sticky {
height: 190px;
position: relative;
margin-bottom: 0;
}
table.table-sticky thead {
}
table.table-sticky thead th:last-of-type {
border-right: 0;
}
table.table-sticky tbody {
overflow-y: scroll;
overflow-x: scroll;
display: inline-block;
height: 150px;
width: 400px;
/* position: absolute; */
}
/*.table-responsive {
overflow-x: inherit;
}*/
table.table-sticky-double tbody {
height: 142px;
}
table.table-sticky tr.collapse {
background-color: #eee;
display:none;
}
table.table-sticky tr.collapse.in {
background-color: #eee;
display: table;
}
table.table-sticky tr.collapse.in td {
border:0;
color: #666;
font-size: 11px;
padding: 0px;
}
table.table-sticky tr.collapse.in td input {
border: 0;
background: transparent;
box-shadow: none;
color: #666;
font-size: 11px;
}
table.table-sticky tr.collapsing {
-webkit-transition: none;
transition: none;
display: none;
}
thead{
width: 400px;
display: inline-block;
overflow: hidden;
}
Serial
Item code
Item name
Mfg. Date
Expiry Date
Length
Width
Height
Action
0001
00010001
Item 1
01/01/2019
01/01/2020
5.0
3.0
0.0
x
0001
00010001
Item 1
01/01/2019
01/01/2020
5.0
3.0
0.0
x
0001
00010001
Item 1
01/01/2019
01/01/2020
5.0
3.0
0.0
x
0001
00010001
Item 1
01/01/2019
01/01/2020
5.0
3.0
0.0
x
0001
00010001
Item 1
01/01/2019
01/01/2020
5.0
3.0
0.0
x
0001
00010001
Item 1
01/01/2019
01/01/2020
5.0
3.0
0.0
x
0001
00010001
Item 1
01/01/2019
01/01/2020
5.0
3.0
0.0
x
Это решение более элегантно, чем ваше собственное решение, которое напрямую устанавливает атрибут pagecontext. Вы должны использовать тег
для этого:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="newLine" value="\n"/>
${fn:replace(data, newLine, "; ")}
Кстати: $ {fn: replace (data, "\ n", ";")}
НЕ делает работа.
\ n не представляет символ новой строки в выражении EL.
Решение, которое устанавливает атрибут pageContext
для символа новой строки, а затем использует его с JSTL fn: replace
действительно работает.
Однако я предпочитаю использовать Jakarta String Tab Library для решения этой проблемы:
<%@ taglib prefix="str" uri="http://jakarta.apache.org/taglibs/string-1.1" %>
...
<str:replace var="result" replace="~n" with=";" newlineToken="~n">
Text containing newlines
</str:replace>
...
Вы можете использовать все, что хотите для newlineToken; "~ n" вряд ли появится в тексте, в котором я делаю замену, поэтому для меня это был разумный выбор.
Просто используйте функцию fn: replace ()
, чтобы заменить \ n
на ;
.
${fn:replace(data, '\n', ';')}
Если вы ' Если вы используете реализацию Apache EL вместо эталонной реализации Oracle EL (т. е. когда вы используете Tomcat, TomEE, JBoss и т. д. вместо GlassFish, Payara, WildFly, WebSphere и т. д.), то вам нужно повторно экранировать обратную косую черту.
${fn:replace(data, '\\n', ';')}
У меня это не работает:
<c:set var="newline" value="\n"/>
${fn:replace(data, newLine, "; ")}
Это работает:
<% pageContext.setAttribute("newLineChar", "\n"); %>
${fn:replace(item.comments, newLineChar, "; ")}
Для записи, я наткнулся на этот пост, когда занимался этой проблемой:
Многострочная строка в JSTL добавляется как атрибут заголовка текстового поля. Затем Javascript добавляет это как текст по умолчанию для текстового поля. Чтобы очистить этот текст в фокусе, значение должно совпадать с заголовком ... но не работает, поскольку многие текстовые редакторы помещают \ r \ n вместо \ n. Таким образом, следующее избавит от нежелательных \ r:
<% pageContext.setAttribute("newLineChar", "\r"); %>
<c:set var="textAreaDefault" value="${fn:replace(textAreaDefault, newLineChar, '')}" />