更改 Rmarkdown 中 DT:: 数据表中搜索框的默认大小答案

【问题标题】：Change the default size of the Search Box in DT:: datatable in Rmarkdown更改 Rmarkdown 中 DT:: 数据表中搜索框的默认大小
【发布时间】：2018-12-09 12:10:56
【问题描述】：

我尝试在 DT::datatable 中搜索方法/选项来更改搜索框的默认宽度。可用的答案适用于 HTML/CSS 等，但我不确定如何在选项 =list(search = list(search="", width = 200px # 或 width = "200%" 不起作用。

DT::datatable(
  mtcars,options = list(dom="ft",search =list(search = 'Type here to search',
  width= "200%")))

任何关于 DT 中 dom 元素的指导将不胜感激。谢谢。

【问题讨论】：

标签： r datatable dt

【解决方案1】：

唯一对我有用的是这个 css。

$(document).ready(function(){

$('#datatable-buttons_filter').css({"position":"relative","left":"-100px"});
});

【讨论】：

可以检查这个。但是将这段代码放在 Flexdashboard 或 R 中的 Shiny 中的什么位置？
你可以放在前端

【解决方案2】：

我们可以通过两种方式设置 RMarkdown 样式，如 here 所示，然后我们可以使用不同的 CSS 选择器应用特定样式，即 id、类名，甚至是 inputs，就像我们的例子一样。这是一个将 CSS 直接包含在 RMarkdown 文件中的解决方案。

---
title: "Untitled"
output:
  html_document: default
  pdf_document: default   
---
<style>
   h1.title{
        color:red;
   }

   .dataTables_wrapper  .dataTables_filter {
          width: 100%;
          float: none;
          text-align: center; 
          //align the Search box to center. left and right also valid 
   }

   input[type="search"] {
        height: 28px;
        width: 300px;
        margin: 0;
        padding: 0;
        font-size: 10px;
        border: 1px solid #CCCCCC;
  } 

</style>



```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## R Markdown
```{r cars}
library(DT)
#summary(cars)
DT::datatable(
mtcars,options = list(dom="ft",search =list(search = 'Type here to search')))
```

【讨论】：

太棒了。让我检查一下这个和共享的相关链接。关于 dom 元素的任何进一步想法？例如。如何操作其他元素，如 i、r 等。如何将搜索框对齐到中心/左（默认为右）。
@anuanand 请检查我的更新。其他元素的样式可以与任何使用 CSS 的 HTML 标记一样。在浏览器中打开您的文档并使用 Inspect 了解文档结构。
非常感谢。让我学习这个以及更多的 HTML。如果一个人准备好学习，似乎一切皆有可能......！